cTigerDev Posted February 17, 2020 Share Posted February 17, 2020 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! Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 17, 2020 Share Posted February 17, 2020 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. Link to comment Share on other sites More sharing options...
cTigerDev Posted February 17, 2020 Author Share Posted February 17, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 17, 2020 Share Posted February 17, 2020 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 Link to comment Share on other sites More sharing options...
cTigerDev Posted February 17, 2020 Author Share Posted February 17, 2020 @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); }); Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 17, 2020 Share Posted February 17, 2020 Do you have a minimal demo with that code plugged in? Link to comment Share on other sites More sharing options...
cTigerDev Posted February 18, 2020 Author Share Posted February 18, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 18, 2020 Share Posted February 18, 2020 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). Link to comment Share on other sites More sharing options...
cTigerDev Posted February 18, 2020 Author Share Posted February 18, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 18, 2020 Share Posted February 18, 2020 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now