Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

luciadaly's Achievements



  1. 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: https://codepen.io/luciadaly/pen/ZEGBQRO?editors=0110 -> 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.
  2. 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