Search the Community
Showing results for tags 'jump'.
Hi there, I am fairly new here, but quite exited about gsap. I am working on a page that uses several scroll trigger to handle some pinned sections. All these scroll triggers handle the same set of circles to animate between different positions. I have set this up in a way now that these circles spread over the width of the page in the end. If I scroll slowly, this works fine. However, if I scroll quickly to the end, they all snap to the 50vw x-Position of the page. I don't know why this happens, especially not why this only happens on quick scrolling and works fine on slow scrolling. I also noticed this stops happening when I change the mid section scroll trigger to not use scrubbing, so although this happens in the last section, the issue also seems to be connected to the ScrollTrigger of the previous section. How could I fix this, so that it does not jump anymore and spreads the circles across the page reliably with the last ScrollTrigger? Thanks a lot! trych P.S.: I have read the Most Common ScrollTrigger Mistakes article, but none of the measures that are described here seem to help in my scenario.
Hi Im relativ new to gsap and im also not that big of a JS geek, so I'm trying to fiddle my stuff with the forums and the documentaries. But now i got kind of stuck... Im trying to draw those rings (see demo) and afterwards let them do this wave thingy. After that, it should repeat at .addLabel('start') I tried the seek(); staggerFromTo(); and other stuff (e.g. http://jsfiddle.net/geekambassador/eMGsc/), but it might be also a small syntaxerror? Maybe someone can help me Greetings
Here's my example: http://artquest.ru/temp/avon/container.html (sorry for non-Codepen, learning it yet) Notice the 1px jump at the end of the text animations (Chrome, FF), also note the antialiasing change (and similar jump) of all the text after "big V" animation starts (most noticeable in FF). Additionally there is a barely visible pulsing of the middle petal lower border. I think it's all antialiasing problems. Is there any method to avoid it? If pure css animation is used there's no such problems.
I am trying to animate a rotating SVG, but I have two issues: on mouseEnter sometimes the animation "jumps" when I try to mouseEnter/mouseLeave several times, the animation get slower/faster and sometimes it stops completely I am not sure if this issue is due to the fact that I am not using a timeline, but I cannot use it easily because I have a complex animation. Is there a solution without using a timeline?