Jump to content
Search Community

TikaL

Members
  • Posts

    4
  • Joined

  • Last visited

TikaL's Achievements

  1. 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?
  2. 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?
  3. @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?
  4. Hi guys, So what I'm trying to create is an animation where: Circle element starts the animation with a radar blip effect - DONE My dashed path with mask is supposed to animate from where the circle element is positioned to the right and creates a circle - DONE 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! gsap-animation.mov
×
×
  • Create New...