Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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  :) 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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.)

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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. 

Share this post


Link to post
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.

 

 

Share this post


Link to post
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 1
  • Haha 4

Share this post


Link to post
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.

×