Struggling to animate my images with greensock so they start from bottom: 0, have opacity 1, and stagger in. My code seems valid but I must be missing something after looking at it for so long.
I suspect the find() function is not returning what I expect since I don't see an object containing all the img elements.
Here's what my console is showing:
[prevObject: jQuery.fn.init[0], context: document]
This is my Script:
$(document).ready(function(){
var mainText = $('ul.images li').find('img');
console.log(mainText);
var tween = TweenMax.staggerTo(mainText, 0.75, {
opacity: '0',
bottom: '300px',
left: '50%'
}, 0.3);
});
Here is my HTML:
<ul class="images">
<li class="image brain"><img src="img/science/brain.svg" class="img brain" alt="cell-watermark-bg"></li>
<li class="image mitochondria"><img src="img/science/mitochondria.svg" class="img mitochondria" alt="cell-watermark-bg"></li>
<li class="image microscope"><img src="img/science/microscope.svg" class="img microscope" alt="cell-watermark-bg"></li>
<li class="image scientist"><img src="img/science/scientist.svg" class="img scientist" alt="cell-watermark-bg"></li>
<li class="image beaker"><img src="img/science/beaker.svg" class="img beaker" alt="cell-watermark-bg"></li>
<li class="image beaker-2"><img src="img/science/beaker-2.svg" class="img beaker-2" alt="cell-watermark-bg"></li>
<li class="image atom"><img src="img/science/atom.svg" class="img atom" alt="cell-watermark-bg"></li>
<li class="image dropper"><img src="img/science/dropper.svg" class="img dropper" alt="cell-watermark-bg"></li>
<li class="image dna"><img src="img/science/dna.svg" class="img dna" alt="cell-watermark-bg"></li>
</ul>
My CSS (SCSS):
ul.images {
position: relative;
.image {
position: relative;
width: 100%;
.img {
position: absolute;
height: 50px;
opacity: 1;
-webkit-transition: background-color 0.2s ease;
-moz-transition: background-color 0.2s ease;
-o-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
&.dna {
bottom: -40px;
left: -30%;
}
// Rest of the image styles...
}
}
}