Jump to content
Search Community

Simple animating multiple objects

jeansandjacktrequired test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all, newbie here


 


I am trying to create a very simple animation based on one of the animations in Greensock 101.


 05-Animating-Multiple-Objects


 


I want to have img1 fade in from the left and stay.


20 pixels below I want img2 to fade in from the right and stay.


and img3 will fade in from the left 10 pixels below img2 and stay


 


 


(function($) {


    


var one = $('img1'),


two = $('img2'),


three = $('img3'),


tl = new TimelineLite(); 


 


tl


.from(one, 0.3, {y: -15, autoAlpha: 0, ease:Power1.easeOut})


.from(two, 0.3, {y: -15, autoAlpha: 0, ease:Power1.easeOut}, '-=0.15')


.from(three, 0.3, {y: -15, autoAlpha: 0, ease:Power1.easeOut}, '-=0.15')


 


})(jQuery);


 


I am working with the above JS - i don't think the y values are correct yet (?)


I have confusions about calling this correctly in the CSS and html.


Link to comment
Share on other sites

It would be best if you could provide a codepen demo in the future - that makes it much easier for all of us to make sure we're on the same page about what's happening. 

 

The "y" describes how far **from the native position in the document flow** it should render. So in your example, they're all coming from 15 pixels above. From your text description, one should use y:20, two should use "x" instead of "y" (because you want it to come from the right which is horizontal), like x:20, and three should use x:-10 (again, because it's horizontal movement). 

 

I think you'll really enjoy playing around with things on codepen because it's so fast to change and see what's going on. If you're not familiar with it, see http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...