Jump to content
GreenSock

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

Issue resolving console warnings

Recommended Posts

I am having an issue figuring out how to resolve some console warnings with my current build, which is paired with scrollmagic. (would love any suggestions for a newer and more supported scroll library btw). My animations are working fine. I am using Web pack for bundling.

 

I am trying to replicate the scrolling effect done in Demo 8 here:

 

First warning:

Invalid property onOverwrite set to undefined Missing plugin? gsap.registerPlugin() gsap-core.js:83:17

Second warning:

(ScrollMagic.Scene) -> (animation.gsap) -> WARNING: tween was overwritten by another.

I have tried different methods but cannot seem to resolve this one. Im sure it is because i have the code in a .each(function()) trying to target multiple containers with the same calss. Any suggestions on a different way to build this would be appreciated.
Code below:

 

import * as ScrollMagic from "ScrollMagic"; 
import { gsap } from "gsap";
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";
import "ScrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js";

ScrollMagicPluginGsap(ScrollMagic, gsap); 
gsap.defaults({overwrite: true});

var controller = new ScrollMagic.Controller();

if ( $(".cu-breakout").length > 0 ) {
  $(".cu-breakout").each(function() {
    var child = $(this).find(".breakout-content");
    var tl = gsap.timeline();
    tl.to(child, 1, { y: -50, ease: "none"});

    var scene = new ScrollMagic.Scene({
      triggerElement: this,
      triggerHook: 0.9,
      offset: 50,
      duration: "100%"
    })
      .setTween(tl)
      .addTo(controller);
  });
}

Thanks for any help!

Share this post


Link to post
Share on other sites

Hey cTigerDev and welcome to the GreenSock forums! The live version of ScrollMagic doesn't support GSAP 3 but a PR has been made to add it: https://github.com/janpaepke/ScrollMagic/issues/918

 

But ScrollMagic is not a GreenSock product and not well maintained. We don't recommend using it and recommend using alternatives instead such as using intersection observers. If you share your end goal we could perhaps provide additional insight as to how to set it up.

Share this post


Link to post
Share on other sites

My first warning, i believe, does not have anything to do with scrollmagic.

I have updated my post, i am trying to replicate Demo 8 on the page here:

In doing so, i am getting these warnings and hoping to figure out a way to enhance my code and have them eliminated.


Thanks

Share this post


Link to post
Share on other sites
20 minutes ago, cTigerDev said:

My first warning, i believe, does not have anything to do with scrollmagic.

It does have to do with ScrollMagic: 

 

Sorry, I thought they mentioned that in the GH issue above. 

 

22 minutes ago, cTigerDev said:

i am trying to replicate Demo 8 on the page here:

You can do so without ScrollMagic using the technique outlines by OSUBlake here:

See the Pen a633d0c9e6e2b951496d7f1eb4fd8fb6 by osublake (@osublake) on CodePen

Share this post


Link to post
Share on other sites

@ZachSaucier Thanks. I have been researching and now deciding to try and drop scrollmagic and try this intersection observer method. This is all new to me. I have an attempt trying to convert my scrollmagic script from above and cannot get it to parallax like demo 8

const images = document.querySelectorAll('.cu-breakout');
var tl = gsap.timeline();
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if(entry.intersectionRatio > 0) {
          tl.to(entry.target.children, 1, { y: -50, ease: "none"});
        } else {
          tl.to(entry.target.children, 1, { y: 50, ease: "none"});
        }
        
    });

});

images.forEach(image => {
    observer.observe(image);
});

 

Share this post


Link to post
Share on other sites

Do you have a minimal demo with that code plugged in?

Share this post


Link to post
Share on other sites

Here is a codepen. Again trying to replicate a parallax similar to what i saw in GSAP's posted page of demos from scrollmagic, but using the recommended intersection observers instead. New to this so thanks for any help.

See the Pen BaNzmpx by ahorwatt (@ahorwatt) on CodePen

 

i found a codepen through the forum of someone doing it, but they are not using GSAP for animations

See the Pen oGwRvW by aderaaij (@aderaaij) on CodePen

 

Share this post


Link to post
Share on other sites

You say it's supposed to be like the demo 8 on the ScrollMagic article, but your layout is quite different. And the way that you're attempting to animate it will move it between -50 and 0, not stopping anywhere in between the two.

 

So what's your actual end goal? To just toggle between two values (with animation) or to be able to have users stop scrolling part way between the two? 

 

If it is to be the same behavior as the demo but using a different layout then I would use the technique of the demo I posted most recently above, not intersection observers (though it could be done with intersection observers, it'd just be more difficult). 

Share this post


Link to post
Share on other sites

I already had a version working and doing what i want with that same structure, using scrollmagic. I was trying to replicate the functionality using the intersection observers, which i clearly do not know much about. End goal is just to have a parallax object which translates vertically as the user scrolls. Im sure there are tons of ways to do it but i was just trying to figure out how to do it using GSAP and intersection observers.

Share this post


Link to post
Share on other sites

You can easily replace those ugly .style calls in the second demo you posted above with GSAP and have it animate with GSAP in that way :) 

See the Pen gOpMzNb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

As you can tell, most of the logic is just JS/intersection observer things. Not much related to animating it :) 

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.

×