Search the Community
Showing results for tags 'infinite loop'.
-
Hello, I have two endless loop animations going in different directions, but the animation on the right does not start from the top like the other one and works problematic. Can you help me?
-
Hi. I was trying to reverse engineer this demo using the Modifiers plugin: https://codepen.io/GreenSock/pen/QEdpLe I got it to go downwards on the Y access okay, but I'm running into issues getting to get it to go up. Any help? Also, if you could explain how the % mod works, that would be great. Please no jquery.
- 20 replies
-
- loop
- modifiersplugin
-
(and 4 more)
Tagged with:
-
Hello All I'm trying to make and endless loop with two rows going in opposite directions. The first row works fine, but the second row has a bug where there is a gap of unrendered elements after Infatuation. Any ideas on what's going on? Code is Below (Apologies, but I have issues making react Code Pens): https://codesandbox.io/s/test-carousel-forked-s5wtub
- 5 replies
-
- infinite loop
- react
-
(and 1 more)
Tagged with:
-
Hi there! I want to implement a marquee effect in this existing script with left or right-direction options. and I also want features for example if the user drags this slide right to left after that this will automatically marquee right to left and if the user drags this slide left to right after that this will automatically marquee left to right. Can you please help me with this? Note: all existing feature also works fine just need the marquee effect with left and right scrolling feature. Thanks!
-
How to create infinite horizontal sliders with some sliders moving in opposite direction
dupechuks posted a topic in GSAP
Hello, Please I need help recreating this using gsap because i want to have smooth scroll. Every attempt I made using gsap meant that I lost the infite loop effect. I really do not know how or what to do. I went through this demo it did not have an infinite loop and also I did not really understand the code. I would be glad if i could find a solution with helpful explanations so that I learn aswell.- 1 reply
-
- infinite loop
- slider
-
(and 2 more)
Tagged with:
-
As an exercise I've been attempting to modify this tween that creates an infinite loop of images fading in with the first image showing on initial render and then will animate out after a delay. The change I'm trying to make is I want to translate AND fade images in while overlapping the previous image. The sequence I'm looking for is: After initial delay on first image Move old image up AND out right after starting to move the new image up and in on top of the previous image Rinse and repeat I'm having trouble with the timing of the stagger. I'm wondering if a label between the first and the last tween segment would help. I'm also struggling with overlapping image 1 over image 3 when the loop starts all over again. I'm sure adding a z-index somewhere would help but I don't know where. I think I could do a lot of cool stuff if I can master this pattern. In many ways this expected behavior is very similar to @Carl 's stagger example in the "GSAP: Beyond the Basic course" Greensock Staggers with Seamless Loops but The only difference I'm trying to merge the logic to have the first item visible on load and starts animating after a delay. Any help would be so so appreciated
-
Hey guys, I'd like to achieve an infinite horizontal animation that changes direction (and speed) depending on whether the user scrolls up or down. The animation currently changes with scroll, but eventually stops (see codepen). I know there are a few examples of infinite loops on the forum, however I wasn't able to combine them with a change in scroll direction. Any help on how to create an infinite loop with this example would be amazing Cheers~
-
Add a class at intervals to a particular element of an infinitely scrolling (vertical) timeline of varying durations
Jordan Castiel posted a topic in GSAP
Hi guys! This is my first post ever, I'm new to GSAP and I'm soooooooooo stuck, I need your help I'm creating a series of cards (length varies) that scroll vertically and infinitely, I've been able to achieve that, however, at every point, there should be an active card that appears expanded than the rest and that card is usually the one that's positioned at the middle of the view port... That is, as the cards scroll up vertically, whichever card is at the vertical middle should expand and once it's gone above the middle section of the viewport, the card below it should now become expanded, and so on... so, at any given time, a card should be in focus... I'm VERY new to GSAP and this has kicked my ass for about a month, Please I'd appreciate some help here, Thanks Also, please let me know if my code can be improved... BTW, this is how the expanded card looks in motion: Note: I must also mention that, the way I have this implemented in my actual code (Gatsby application), each card gets a prop - active - and whenever active is set to true, the classes that cause the expansion are applied... So, a solution that would work out of the box for me is one that updates the state of a particular card whenever it's in the viewport... so, something that checks and updates the prop of the card... if this isn't good for performance I'm ready to stick with whatever works... Thanks so much: -
MotionPath Orbiting Items Seamless Infinite Loop Timeline Start Position
vektor posted a topic in GSAP
Hello again! I've managed to make some items orbit infinitely ? There are a few things I'm slightly struggling with: 1: I have tried using 'progress' and 'totalProgress' to make the animation start in 'full orbit' (i.e. without the beginning part). I've tried setting it all the places that seem correct (see commented out js in codepen). I must be missing something as nothing I've tried works..? 2: If you check the console, there are lots of errors like '"Invalid property" "start" "set to" 0.5714285714285714 "Missing plugin? gsap.registerPlugin()"'. I'm working in Magento2 ? so thought this was some kind of require.js error, but it also happens in the codepen demo. In the past I have seen this if there is a null target, but there are no null targets here. Why are these errors happening? 3: Also, in this simplified demo, the items seem to not follow the path exactly..? (offset and seems slightly wonky too). I assume this is something to do with the svg path itself? The 'items' are too small to need an offset? Magneto2 sidenote: I couldn't get MotionPathHelper to work, I really tried! I loaded it in the correct method via requirejs-config.js. Just mentioning this in case anyone has had the same issue and worked it out. I used the minified js files. Look forward to your response, thanks!! P.s. Loving version 3 !- 10 replies
-
Hello, First of all thank very much for this incredible tool! I am an absolute noob developing animations (and web pages) and thanks to GSAP I've had to do so little efforts to learn . I am trying to rotate a image and control the animation, very similar to the Ferris example: http://codepen.io/GreenSock/pen/wBbKs?editors=1010 The user can select if the rotation is clockwise or counterclockwise. This is my question: is it possible to do a infinite reverse loop without TimelineMax, just a TweenMax instance? The problem is that, related with this rotation, I am drawing a sine wave based on the tween progress. However, when TimelineMax reaches onReverseComplete or onComplete, a small lag can be checked in the sine wave drawing, distorting the result. I do not find this lag if I use only TweenMax, but I am not able to do a reverse infinite loop only with TweenMax... Thank you in advance!!
- 6 replies
-
- timelinemax
- infinite loop
-
(and 1 more)
Tagged with:
-
onDrag, onThrowUpdate : How to dynamically shift the value to create a loop or infinite scroll ?
mobile posted a topic in GSAP
Hi, I use the great draggable + throwprops in the scrollTop context. Now, I would like to build an infinite scroll loop, both way up and down, as a sort of spinning wheel (often used to select a day month hour ...). I have tried onDrag, onThrowUpdate, testing and changing dynamically the scrollTop() based on my limit values, but it is impossible during the animation, only after. I am now searching using liveSnap or any update() method or thru scrollProxy object changes ? It shall be easy to use scrollTop to build a loop (shifting onthego the dynamic value used by scrollTop), to endlessly loop the scrolled content without breaking the great and smooth draggable animation. = infinite scrollable using draggable, throwprops and scrollTop ? If the scrollTop is higher then the scrollable_limit we have chosen, we wanna that the scrollTop return to 0 while not breaking the actual drag or throwprops movement. And if the scrollTop is 0 and the user want to see the end while dragging, the scrollTop shall be set to the scrollable_limit we set. It could really be useful ! So the user has never to return far up or far down and have an endless repeatition of the content ( scrolling a menu From A to Z, A to Z, A to Z or Z to A, Z to A, Z to A ... ) smooth. Thank you.- 5 replies
-
- draggable
- throwprops
-
(and 2 more)
Tagged with: