[How can I use GSAP 3 with scroll magic?]

11 hours ago, carlosavilasi said:

scrollmagic-plugin-gsap

Original animation.gsap.js plugin for ScrollMagic is not compatible with ES6 modules, so it's causing a number of problems to add it in ES6 environment. Use this module to simple wrap ScrollMagic with animation.gsap.js in ES6. 

 

npm install --save scrollmagic-plugin-gsap

import * as ScrollMagic from "scrollmagic"; // Or use scrollmagic-with-ssr to avoid server rendering problems

import gsap from "gsap";  // Also works with TweenLite and TimelineLite: import { TweenMax, TimelineMax } from "gsap";

import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";

 

ScrollMagicPluginGsap(ScrollMagic, gsap);

 // There you can use setTween() in ScrollMagic Scene with no problems

 

Wow! Finally a solution that works! THANKS.

 

 

[GSAP3 Target object not found]

Thanks @ZachSaucier much appreciate the reply!

[GSAP3 Target object not found]

Exactly what I was looking for...if you were to use an if statement to detect if the element(s) exist or not and only create the tween if they exist - how would you go about this? Apologies, my general JS skills aren't great.

 

For example, for something as simple as this...

gsap.to(".loading-screen", {
    delay: 2.8,
    top: "-100%",
    ease: "expo.inOut"
});

 

or

 

var tween = gsap.to(".loading-screen", {
    delay: 2.8,
    top: "-100%",
    ease: "expo.inOut"
});