Jump to content
GreenSock

Page Tailoring

How can I use GSAP 3 with scroll magic?

Recommended Posts

Hello ^_^
When i import scrollMagic files via npm , it gives me error and says: "Uncaught ReferenceError: TweenMax is not defined" , in Gsap2 I was importing TweenMax by hand and it helped,  but in Gsap3 i don't know how to do it, can you help me? 

Thank you

  • Like 2
Link to comment
Share on other sites

Hey @salyone. You should be able to import it using the following: import { TweenMax } from "gsap". However, you can replace TweenMax with the gsap object in GSAP 3 as covered in the Top 5 GSAP 3 Features article (that's the more preferable solution).

  • Like 2
Link to comment
Share on other sites

Hi, all :) 

 

I resigned from "animations.gsap" ScrollMagic plugin and handle this like that:

 

 

import { gsap } from "gsap";
import ScrollMagic from 'ScrollMagic';

const controller = new ScrollMagic.Controller();

const easeInOut = 'circ.easeInOut';
const time = .5;

const menuAnim = gsap.timeline({defaults:{ease: easeInOut, duration: time}})
	.to('nav', {y: '-100%'})
	.to('#logo', {opacity: 1}, "-=0.4")
	.to('.main-nav', {opacity: 1}, "-=0.4")
	;
menuAnim.pause();	          

new ScrollMagic.Scene({
    triggerElement: '#home',
    duration:0,
    triggerHook: .85
    })
    .on("enter", function (e) {
        menuAnim.play();
    })
    .on("leave", function (e) {
        menuAnim.reverse();
    })
    .addTo(controller);

 

  • Like 2
Link to comment
Share on other sites

  • 2 months later...

I know this is a ScrollMagic issue but just adding that loading via require.js (magento2 flavour) doesn't work either. 

 

"Uncaught Error: Script error for: TweenMax http://requirejs.org/docs/errors.html#scripterror"

 

Saw this https://github.com/jonkwheeler/ScrollScene, but cannot successfully load it via npm in Magneto 2.

 

Anyway, until ScrollMagic fix it I'll just use the method above or maybe just start using IntersectionObserver to trigger animations  :) 

Link to comment
Share on other sites

17 minutes ago, vektor said:

until ScrollMagic fix it I'll just use the method above or maybe just start using IntersectionObserver to trigger animations  :)

Or just use intersection observers all the time ;)

  • Like 4
Link to comment
Share on other sites

  • 3 weeks later...

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
 
  • Like 4
Link to comment
Share on other sites

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.

 

 

  • Like 2
Link to comment
Share on other sites

  • 1 month later...
On 2/26/2020 at 12:44 PM, 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
 

 

I'm trying this solution but in console I get these warnings:

 

ScrollMagic.js:2647 12:54:52:246 (ScrollMagic.Scene) -> (animation.gsap) -> WARNING: tween was overwritten by another. To learn how to avoid this issue see here: https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another

Invalid property onOverwrite set to undefined Missing plugin? gsap.registerPlugin()

Any ideas?

Link to comment
Share on other sites

2 hours ago, mikel said:

 

Hey @Black Ducas,

 

... and the pointer: "To learn how to avoid this issue see here: https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another".

 

ScrollMagic is not a GreenSock product and we don't really recommend using it.

 

Happy tweening ...

Mikel

Hi @mikel

I'm reading that but it seems all ok.

Anyway, have you to advice a ScrollMagic alternative to use with GSAP 3? Thanks

Link to comment
Share on other sites

I would be interested to know of a 'GSAP recommended' alternative to ScrollMagic, always looking to use the right tools and combinations

  • Like 2
Link to comment
Share on other sites

Hey @agilepixel and welcome to the GreenSock forums! Thanks for being a Club GreenSock member. We couldn't do what we do without people like you. 

 

GreenSock is actually working on our own scroll plugin but it hasn't been released yet.

 

Until we have the scroll plugin, to animate thing on scroll you have to use either the scroll position or the intersection observer API. Here's a basic demo using the scroll position:

See the Pen BaNPoEK by GreenSock (@GreenSock) on CodePen

 

And here's an article that talks about using the intersection observer API with GSAP: https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa 

  • Like 7
Link to comment
Share on other sites

@ZachSaucier is there a github repo or beta version available of the scroll plugin that's in development, it'd be great to get involved with that.

Link to comment
Share on other sites

32 minutes ago, agilepixel said:

is there a github repo or beta version available of the scroll plugin that's in development, it'd be great to get involved with that.

No, it is still in a private testing phase.

Link to comment
Share on other sites

3 hours ago, ZachSaucier said:

No, it is still in a private testing phase.

 

My team is really interested in this as well. Is there an estimated release date for either a beta or final version? Any way to be notified when it's available? (I'm signed up for the newsletter but it seems like only big/major releases are announced there.)

Link to comment
Share on other sites

1 minute ago, gmullinix said:

Is there an estimated release date for either a beta or final version?

3-6 weeks for the public version but no promises :) 

 

1 minute ago, gmullinix said:

Any way to be notified when it's available? (I'm signed up for the newsletter but it seems like only big/major releases are announced there.)

We'll announce it via the newsletter for sure.

  • Like 2
  • Thanks 3
Link to comment
Share on other sites

@ZachSaucier Thanks for the info. We will do our best to be patient! :)

 

In the meantime, we're going to use the Intersection Observer unless you have a different suggestion.

Link to comment
Share on other sites

The Intersection Observer is the best choice until GreenSock drops the new plugin. 👍

 

PS The new plugin will be worth the wait. 

  • Like 5
Link to comment
Share on other sites

I am also waiting new plugin. Currently, I am using Scroll magic because it has one cool feature like Pin option and horizontal scroll. I hope new plugin will also have it. 

Link to comment
Share on other sites

7 minutes ago, wpsoul said:

I am also waiting new plugin. Currently, I am using Scroll magic because it has one cool feature like Pin option and horizontal scroll. I hope new plugin will also have it. 

 

It does, but I'm wondering why people do horizontal scrolling. Kind of a pain when you only have a mouse wheel that goes up and down.

 

 

Link to comment
Share on other sites

3 minutes ago, OSUblake said:

 

It does, but I'm wondering why people do horizontal scrolling. Kind of a pain when you only have a mouse wheel that goes up and down.

 

 

That's easy, "clients" and "designers" 😀

  • Like 2
  • Haha 4
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.
×