mrTowers

let me go check it out now, I'll get back to you if I have any questions. Thank you

Hi! Sorry for the super late reply. Well I totally missed that "#" but even when I added that and fixed another typo in my "sizeAll" function still don't work. The reason I asked is because I'm adding a new scene and I'm not sure if the way I'm assigning it to the new controller is the right way. I guess I'm just confused since I'm sharing the same "#hook". I feel like there's a cleaner way to achieve what I'm after, feels messy and overworked. Thanks!

So, if I wanted to make another element animate similar to the one done previously do I have to make a separate JS file? I'm trying this but is not working. I'm having issues understanding how to attach multiple tweens to the same triggerElement. console.clear(); const tween = new TimelineMax(); const tween2 = new TimelineMax(); /*======================= Animations =======================*/ tween.add( TweenMax.to ('#mobileLogo', 1,{ opacity:0, ease:Power1.easeInOut, }) ); tween.add( TweenMax.from ('#containerB, .containerC', 0.5,{ opacity:.5, }) ); tween2.add( TweenMax.to ('.pictureSpacer', 0.25,{ opacity:1, }) ) const controller = new ScrollMagic.Controller(); const controller2 = new ScrollMagic.Controller(); /*======================= Scenes =======================*/ const scene = new ScrollMagic.Scene({ triggerElement: '#hook', duration: 395, triggerHook: 0.9 }) const scene2 = new ScrollMagic.Scene({ triggerElement: 'hook', duration: 395, triggerHook: 0.9 }) /*======================= Add to scene =======================*/ .setTween(tween) //Applies tween animation to Scroll action //.addIndicators() // Display indicators for triggers .addTo(controller) .setTween(tween2) .addTo(controller2); function sizeAll() { var w = window.innerWidth; if ( w < 450) { scene.enabled(true); scene2.enabled(true); } else { scene.enabled(false); scene.enabled(false); } } $(window).resize(sizeAll); sizeAll(); Any tips? Thanks in advance

It worked. Thank you much sir! I'll be picking your brain for time to time. Cheers

Hi Craig, thank you for your response. Seems like you're a legend around here, I feel honored I tried replicating your codePen to fit my needs and seems like I'm not getting anywhere. I think I included all the GSAP bundles but still not even getting the Indicators to show up. here's an example: https://codepen.io/curvedFrame/pen/Ymojzw

const tween = new TimelineMax(); /*======================= Animations =======================*/ tween.add( TweenMax.to ('#mobileLogo', 1,{ opacity:0, ease:Power1.easeInOut, }) ); tween.add( TweenMax.from ('#containerB, .containerC', 0.5,{ opacity:.5, }) ); const controller = new ScrollMagic.Controller(); /*======================= Scenes =======================*/ const scene = new ScrollMagic.Scene({ triggerElement: '#containerB', duration: 395, triggerHook: 0.78 }) /*======================= Add to scene =======================*/ .setTween(tween) //Applies tween animation to Scroll action //.addIndicators() // Display indicators for triggers .addTo(controller); Hello! I'm new to GSAP and web animation, so far I'm really enjoying using this products and every time I find myself just pushing for the next question until I get really stuck. I'm trying to disable the animation applied to "mobileLogo" when the media query is over 400. I'm not sure how to do this using GSAP. I would like to get some ideas in how to approach this. Thanks in advance.