[Hiding sticky animation based on trigger section]

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

 

[Different Scrolltrigger triggers with matchMedia?]

Thank you Cassie!

 

You're right. I had some issues with the class selectors that prevented it from working.

 

-Espen

[Different Scrolltrigger triggers with matchMedia?]

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

 

[Can't seem to get 3.8's preventOverlaps to work]

5 minutes ago, Cassie said:

Ah, that demo is a little misleading. I'll update the article.

 

it's preventOverlaps: true you're looking for.

 

In the demo the variable passed to preventOverlaps is a boolean.

 

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

[Can't seem to get 3.8's preventOverlaps to work]

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

[Animate SVG ViewBox along path?]

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

[Animate SVG ViewBox along path?]

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