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
