jimeast Posted May 21, 2020 Posted May 21, 2020 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");
ZachSaucier Posted May 21, 2020 Posted May 21, 2020 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:
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now