Trying to get my images to start from bottom: 0 and opacity 1 and stagger in using greensock animation. I am not sure what i am doing wrong as my code looks valide, maybe i have been staring at it for too long.
I assume the the find() is not working how i want it to as i am not seeing an object with all the img elements in it.
Here is what my console is outputting:
[prevObject: jQuery.fn.init[0], context: document]
Here 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>
Here is 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%;
}
&.scientist {
bottom: 40px;
left: -40%;
}
&.atom {
bottom: -60px;
left: 60%;
}
&.cell {
bottom: -90px;
left: -96px;
}
&.brain {
bottom: -130px;
left: 250px;
}
&.dropper {
bottom: -120px;
left: -20%;
}
&.beaker {
bottom: -60px;
left: 15%;
}
&.beaker-2 {
bottom: -100px;
left: 100%;
}
&.mitochondria {
bottom: -40px;
left: 120%;
}
&.microscope {
bottom: 45px;
left: 110%;
}
}
}
The problem was in your scss. ul.images{...} wasn't actually being closed. I've closed it and the animation appears to work as I understand your question.
Note: I've wrapped your js into a one second timeout so you can see elements placed onto the stage before the animation fires.
It's a bit odd that your sass compiler didn't shout at you saying there was something wrong.