luciadaly Posted February 20, 2020 Share Posted February 20, 2020 Hi I am super new to scroll animation. I am struggling to upgrade my scroll animation from GSAP v2 to v3. My animation consists of three images overlayed which move up and down as you scroll, while the bottom image stays static. I used bezier to create the paths, but now I am unable to convert everything to work properly in V3. I basically create two paths for each of the two images that move up and down. Apparently TimeLineLite and TweenLite are deprecated and I should rather use gsap.timeline. Bezier is also outdated so I should use MotionPathPlugin. I'm having trouble importing everything properly as well as converting everything to V3. I'd really appreciate help on this! Below is my code... import * as ScrollMagic from 'scrollmagic'; import { TweenLite, TimelineLite } from 'gsap'; $(document).ready(function () { const duration = 1; const time = 200; // Set Flight Path const flightPathUp = { curviness: 0.5, autoRotate: false, values: [{ x: 0, y: -100 }] } const flightPathUp2 = { curviness: 0.5, autoRotate: false, values: [{ x: 0, y: -80 }] } const flightPathUp3 = { curviness: 0.5, autoRotate: false, values: [{ x: 0, y: -100 }] } const flightPathUp4 = { curviness: 0.5, autoRotate: false, values: [{ x: 0, y: -80 }] } // Create Tweens const tween = new TimelineLite(); tween.add( TweenLite.to('.image-4', duration, { bezier: flightPathUp, ease: Power1.easeInOut, opacity: 1 }) ); tween.add( TweenLite.to('.image-4', duration, { bezier: flightPathUp3, ease: Power1.easeInOut, opacity: 0.1 }) ); tween.add( TweenLite.to('.image-3', duration, { bezier: flightPathUp2, ease: Power1.easeInOut, opacity: 1 }) ); tween.add( TweenLite.to('.image-3', duration, { bezier: flightPathUp4, ease: Power1.easeInOut, opacity: 0.1 }) ); const controller = new ScrollMagic.Controller(); const scene = new ScrollMagic.Scene({ triggerElement: '.animation', triggerHook: 0, offset: -220, duration: time, }) .setTween(tween) {# .addIndicators() #} .addTo(controller); }); Thank you very much Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 20, 2020 Share Posted February 20, 2020 Hey luciadaly and welcome to the GreenSock forums! What issues are you having specifically? My guess is that the issue is mostly coming from the use of ScrollMagic which hasn't been updated to work with GSAP 3 yet (though there has been a merge for it). Your question is much more likely to get answered quickly if you include a minimal demo of the issue using something like CodePen, StackBlitz, or CodeSandbox Link to comment Share on other sites More sharing options...
OSUblake Posted February 20, 2020 Share Posted February 20, 2020 Why are you even trying to use the motion path plugin if you're just moving to a point? 10 hours ago, luciadaly said: I'm having trouble importing everything properly as well as converting everything to V3 Check out the docs. https://greensock.com/docs/v3/Installation?checked=core,motionPath#modules https://greensock.com/docs/v3/Plugins/MotionPathPlugin I can't help with the scroll magic stuff, but everything else should be very straightforward to convert over. import { gsap } from "gsap"; import { MotionPathPlugin } from "gsap/MotionPathPlugin"; gsap.registerPlugin(MotionPathPlugin); ... const flightPathUp = { curviness: 0.5, path: [{ x: 0, y: -100 }] }; const flightPathUp2 = { curviness: 0.5, path: [{ x: 0, y: -80 }] }; const flightPathUp3 = { curviness: 0.5, path: [{ x: 0, y: -100 }] }; const flightPathUp4 = { curviness: 0.5, path: [{ x: 0, y: -80 }] }; const tween = gsap.timeline({ defaults: { duration: duration, ease: "power1.inOut" } }); tween .to(".image-4", { motionPath: flightPathUp, opacity: 1 }) .to(".image-4", { motionPath: flightPathUp3, opacity: 0.1 }) .to(".image-3", { motionPath: flightPathUp2, opacity: 1 }) .to(".image-3", { motionPath: flightPathUp4, opacity: 0.1 }); 4 Link to comment Share on other sites More sharing options...
luciadaly Posted February 21, 2020 Author Share Posted February 21, 2020 Thanks a lot @OSUblake and @ZachSaucier for the advice. I will try my best to get your code suggestion working on my side. My codepen of the original code that works: See the Pen ZEGBQRO?editors=0110 by luciadaly (@luciadaly) on CodePen -> Just imagine the top two image layers being the layers of the phone's screen. I wasn't aware of the "legacy" issue at that time, so now I'm just trying to find the best and fastest way of making it work in my Vuejs application 😅 Please, if you have more advice or suggestions on how to change it, let me know. Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 21, 2020 Share Posted February 21, 2020 Let us know if you run into any issues Link to comment Share on other sites More sharing options...
hnkio36 Posted February 29, 2020 Share Posted February 29, 2020 I have done this before, following what OSUblake guided above, everything is fine! 4 Link to comment Share on other sites More sharing options...
maibathoaphatdat Posted May 30, 2020 Share Posted May 30, 2020 On 2/29/2020 at 3:01 PM, hnkio36 said: I have done this before, following what OSUblake guided above, everything is fine! Thanks much, I have just tried and get it successfully done. 1 Link to comment Share on other sites More sharing options...
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