Jump to content
Search Community

Converting to gsap3

jimeast test
Moderator Tag

Recommended Posts

How would I rewrite this to work in GSAP3

 

  var tL = new TimelineLite();
 
  tL.add("mylabel"2);
 
  tL.to("#frame1"2, { opacity: 1 });
  tL.to("#txt1".2, { y: 64, opacity: 0, ease:Sine.easeOut }, "mylabel");
  tL.staggerFrom("#squares img"0.8, {scale:0, y: 250, autoalpha:0, ease:Elastic.easeOut}, 0.1"mylabel");
 
  tL.from("#smiley"2, { x:-100, rotation: -360, ease:Back.easeOut }, "+=.4");
Link to comment
Share on other sites

Hey jimeast. We cover how to convert to GSAP 3 extensively in the GSAP 3 migration guide:

 

With that in mind, you could write your code above in GSAP 3 and more modern JavaScript like so:

const tl = gsap.timeline()
  .add("mylabel", 2)
  .to("#frame1", { duration: 2, autoAlpha: 1 })
  .to("#txt1", { duration: 0.2, y: 64, autoAlpha: 0, ease: "sine" }, "<")
  .from("#squares img", {duration: 0.8, scale: 0, y: 250, autoAlpha:0, ease: "elastic", stagger: 0.1}, "<")
  .from("#smiley", { duration: 2, x: -100, rotation: -360, ease: "back" }, "+=.4")

For more information, see the timeline docs, the stagger docs, and the post about the position parameter:

 

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...