cTigerDev

Perfect! Exactly what i needed! Thanks a bunch Zach. i knew it was something simple!

On resize, when disabled, the dom object keeps the animation. I want it reset to its original position when disabled. Updated code below with working resize events let tl = gsap.to(child, {y: -50}), st = ScrollTrigger.create({ trigger: child, start: "top 80%", end: "bottom 10%", scrub: true, animation: tl }); console.log(st.animation); // tween if (Foundation.MediaQuery.atLeast('xlarge')) { st.enable(); } else { st.disable(); } $(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) { if ( newSize == 'large' && oldSize == 'xlarge') { st.disable(); ScrollTrigger.refresh(true); } else if ( newSize == 'xlarge' && oldSize == 'large') { st.enable(); } });

still new to this myself but here is a script i did to toggle a class on enter and leave of the target object to add/remove a class. Hope it helps: $(".test").each(function() { // Content Reveal Animation ScrollTrigger.create({ trigger: ".test", start: "top 80%", end: "bottom 100px", onEnter: () => $(this).addClass('revealed'), onLeave: () => $(this).removeClass('revealed'), onEnterBack: () => $(this).addClass('revealed'), onLeaveBack: () => $(this).removeClass('revealed'), }); });

This did it! thanks! will stay tuned for 3.3.1. ** Side note, running custom webpack build. It was working for me locally, including registerPlugin after gsap import. After i run a build, it was throwing same error ddi-web-team reported above and causing all to animate initially on load before scroll, for me in all browsers, not just IE. Great work on the plugin guys!!! so stoked to do more with it!

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.

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. https://codepen.io/ahorwatt/pen/BaNzmpx i found a codepen through the forum of someone doing it, but they are not using GSAP for animations https://codepen.io/aderaaij/pen/oGwRvW

@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); });

I was forwarded to this topic with a similar issue. I have a current build with working animations with scrollmagic and GSAP3 but still getting console warnings. Is the above from @jonkwheeler the only known way to clear these aside from ditching scrollmagic all together? Invalid property onOverwrite set to undefined Missing plugin? gsap.registerPlugin() gsap-core.js:83:17

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

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!