dfreerider

Hi, I have a sticky sidebar animation that I want to show while scrolling down the first half of the webpage. But then hide as we reach and pass a hide animation trigger section further down the page. The animation is hidden by default with CSS since I don't want it to show on mobile etc. On page refresh, I would like to know if we are above the trigger section, and if so unhide the animation. Or if we are below the trigger section, in which case I do not want to unhide the sidebar animation. Can this be done with Scrolltrigger? Or is there a better way to do this? I would highly appreciate any ideas Best Espen

Thank you Cassie! You're right. I had some issues with the class selectors that prevented it from working. -Espen

Hi, I have an animation where I want a different scrollTrigger trigger to drive the animation based on if it is on mobile or desktop. I've tried to use matchMedia to do this but it's not working. I was thinking I could do something like the following, and check for mobile when setting the trigger: let mm = gsap.matchMedia(); mm.add ({ isMobile: "(max-width:800px)", isDesktop: "(min-width:801px)", }, (context) => { let {isMobile, isDesktop } = context.conditions; let tl = gsap.timeline({ scrollTrigger :{ trigger:isMobile ? mobile_class_name : class_name, First of all, I'm wondering if it is possible to use matchMedias to achieve this? It's always possible I have another bug in my code that prevents this from working If it is not possible to use matchMedia to do this, I was wondering how I can best achieve this in another way? Thank you! Best Espen

Aha, that makes a lot of sense I knew it had to be something simple. Thanks a lot for the quick and helpful reply! -Espen

Hi, The new preventOverlaps for ScrollTrigger sounds like just what I need for my project, but I'm having a hard time getting it to work. I'm using the modules with webpack, and I downloaded the newest files 3.8 including bonus files, and ran : npm update ./gsap-bonus.tg Then I replaced my scrub:1 with toggleActions: "play none none reverse", preventOverlaps: preventOverlaps, Then I ran npx webpack However when I try to use the resulting main.js in my code Chrome console just says : main.js:2 Uncaught ReferenceError: preventOverlaps is not defined I guess there is something simple I haven't done but I'm a little lost on how to start to debug this. Any help would be much appreciated! Thanks! -Espen

Wow! This is truly of great help! Blake's tip of using MotionPath to control the viewBox is fantastic! I thought it might be possible but just couldn't figure out how. And Mikels examples show some really cool ideas. From them I think I should be able to accomplish exactly what I need. Thanks guys! -Espen

Hi, I'm quite new to Gsap and for my first project I am creating an animated map (think Indiana Jones's plane flying across the continents ). I have the map and the flight path all working, but I would like to be able to draw a second path and have that control the "camera". I have been experimenting with the Svg ViewBox as a way to pan and zoom on the svg map and it works quite well. I can create a tween to set the viewBox attribute and the camera animates. But I would like update the viewBox attribute such that it follows a path. I don't have a codepen since this is such a generalised question. But I was hoping for some ideas on how to best achieve having a svg viewBox animate along a path. Best Regards Espen