[Best approach to scroll navbar and items horizontally as you scroll page]

Hello, 

 

The codepen I attached shows a navbar that has an overflow-x set to scroll and four sections. What I would like to do is animate or scroll left and or right the ul within the sub-nav container as you scroll the page either up or down. I'm assuming this would require ScrollTrigger and the ScrollTo plugin?

See the Pen qBoYmQx by TikaL13 (@TikaL13) on CodePen

[Animating a dashed line from point A to B]

Hey @mikel, thank you for this. I'm trying to elongate a path using this approach for example. I have this initial path d value.

 

M170.6 28.5l477.5-.5c0-14.9 12.1-27 27-27s27 12.1 27 27-12.1 27-27 27-27-12.1-27-27

 

And at some point in my animation I need this to dynamically be updated to this:

 

M68.2 28h579.9c0-14.9 12.1-27 27-27s27 12.1 27 27-12.1 27-27 27-27-12.1-27-2

 

But when that tween or moments happens I get errors:

 

Error: <path> attribute d: Expected move to path command ('M' or 'm'), "undefined".

 

I'm in a vue app and here is a look at the function that I'm calling at a particular moment. ".pointer" is the dashed path and ".dash" is the mask I'm using to create a growing and shrinking effect. 

 

animateHotspot: function() {

        const hsTL = gsap.timeline();
        let path = this.getData ? this.getData.hotspot.desktop.mark : '';

        hsTL.to('.pointer', { attr: { d: path } })
          .to('.dash', { attr: { d: path } });
      
      }

    }

 

I'm wondering what I'm doing wrong here? this isn't the whole snippet but I wanted to test if dynamically swapping out the "d" value would work. 

 

I was also curious how one would stop a repeating rotation on an element on click or some type of event?

[Animating a dashed line from point A to B]

@ZachSaucier, this is exactly what I was trying to do here. Thank you!

 

One last question: If I wanted to have a dynamic starting point but still end the animation and the same exact x, y position what would be the best approach to adjusting the path?

[Animating a dashed line from point A to B]

Hi guys,

 

So what I'm trying to create is an animation where:

 

1. Circle element starts the animation with a radar blip effect - DONE
2. My dashed path with mask is supposed to animate from where the circle element is positioned to the right and creates a circle - DONE
3. After animation is complete I'd like for the animation not reverse back but have the path from where it starts follow the path and end at the animation. I guess follow the animation? Sorry lack of a better description

 

I've included a screen grab of what I have since my codepen is not animating at all? Thanks!

 

See the Pen QWbpxyX by TikaL13 (@TikaL13) on CodePen