Jump to content
GreenSock

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

Bezier to MotionPathPlugin

Recommended Posts

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

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

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 });

 

 

  • Like 4
Link to comment
Share on other sites

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

I have done this before, following what OSUblake guided above, everything is fine!

  • Like 4
Link to comment
Share on other sites

  • 3 months later...
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.

  • Like 1
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.
×