Jump to content
Search Community

Search the Community

Showing results for tags 'infinite'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 18 results

  1. Hi, I'm having trouble getting the animation to repeat smoothly thanks.
  2. How can I create this same animation with gsap and next js?
  3. Hello guys, I am new to GSAP, recently I am trying to rotate a gradient infinitely but having issues. Help is appreciated. Thanks for this wonderful forum.
  4. I have an infinite marquee, that i thought was working, however it jumps at the very end slightly, im not quite sure why im wondering based on the code provided below if theres anything that looks wrong in what im doing? JSX File: const MobileMarquee = ({ client }) => { // NOTE • Refs const main = React.useRef(); const first = React.useRef(); const last = React.useRef(); React.useLayoutEffect(() => { const ctx = gsap.context(() => { // Split characters const split = new SplitText(first.current, { type: "chars", charsClass: "char", }); // Split characters count + timing calculation const charsTotal = split.chars.length; const timingFactor = charsTotal * 0.25; let timeline1 = gsap.timeline(); let timeline2 = gsap.timeline(); timeline1.fromTo( first.current, { xPercent: 0, }, { xPercent: -100, repeat: -1, duration: timingFactor, ease: "none", } ); timeline2.fromTo( last.current, { xPercent: 0, }, { xPercent: -100, repeat: -1, duration: timingFactor, ease: "none", } ); }, main); return () => ctx.revert(); }, []); return ( <Jacket isPaused={isPaused} ref={main}> <div> <ul ref={first}> {words.map(({ word, uid }) => ( <li key={uid} className="el"> {word}&nbsp;–&nbsp; </li> ))} </ul> {/* Dupl */} <ul aria-hidden="true" ref={last}> {words.map(({ word, uid }) => ( <li className="el" key={uid}> {word}&nbsp;–&nbsp; </li> ))} </ul> </div> </Jacket> ); }; CSS/JS: // Imports // ------------ import styled, { css } from "styled-components"; // Exports // ------------ export const Jacket = styled.h1( (props) => css` position: relative; z-index: 3; overflow: hidden; width: 100vw; div { display: flex; width: fit-content; } ul { display: flex; width: fit-content; position: relative; justify-content: flex-start; transform: translateX(0); li { display: flex; align-items: center; font-weight: ${props.theme.font.weight.reg}; font-family: ${props.theme.font.type.heading}; font-size: 6rem; line-height: 1.2; color: ${props.theme.colors.brand.bc4}; user-select: none; white-space: nowrap; } } ` ); Codesandbox Recreation: https://codesandbox.io/s/react-hooks-example-w-clicker-t6yno?file=/src/pages/index.js Kapture 2023-05-25 at 23.24.09.mp4
  5. 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?
  6. Hi all, I have several problems with the animation of my book. 1. I tried to make a rotateY on my book but the controls did not work on my code (play(), pause(), paused()), so I make a rotate in CSS that I disable by adding or removing a class 2. The animation works perfectly on the first opening and closing cycle, but on the following ones the currentAngle variable is buggy 3. I would like to be able to click on the book only if the animation is finished Here is my code : https://codesandbox.io/s/sad-mcnulty-7k49my I really need your help ;) Thanks to all
  7. Good day! I'm sorry for my bad English. Please tell me how to implement an infinite rotation of the list of elements by pressing the "Start" button with the ability to smoothly stop the rotation on a certain element after 3 seconds. The element is determined randomly each time the "Start" button is pressed. The randomly selected item should stop in the middle of the container.
  8. I don't have a codepen but basically what i want to achieve is this: I have some data loading in the background, and i'm using GSAP3 to create a timeline that's animating an svg infinitly, it's a preload animation basically. What i want to do is that when the data is loaded, i want to pause the current timeline object, animate it until the progress is 1, and then when the animation is completely finished i want to create another animation to smoothly animate the preloader out of the screen and then show the loaded data. I saw an example of this in GSAP2 using TweenMax where: you pass the tweenmax object into the to() method, animate the progress property and then assign a callback function to the onComplete() property to kill the timeline object, but that doesn't seem to work in GSAP3, the svg abruptly jumps to the it's final state (where the progress is equel to 1) instead of animating to it. Can you please tell me how can i achieve this? I can't seem to find any example of this in GSAP3. Thanks in advance!
  9. Hi there, I want to create an animated wheel which starts at a specific degree and ends at a specific degree. Until it's requested to stop/pause it needs to spin infinite. So basically there are three stages "starting", "spinning", "stopping". The difficult task is to start and stop spinning with some momentum to feel natural. I have found multiple very helpful forum posts about that topic. They all stop at a random degree. Especially this seams to be a very similar problem but the solution is missing the momentum at start and stop position. Thanks in advance
  10. Hey! So I have a timeline loop that should loop infinitely, each new timeline has a negative offset to keep the loop from having a gap at the beginning of each timeline I can achieve the desired effect by adding the same timeline with negative delay multiple times ( lots of timeline.add(anim(), "-=3") ) But for some reason today I can't wrap my brain around how to do this nicely? I have tried various things, negative repeatDelay, onComplete set time() / progress(), but none of them quite work. Something like 2 timelines and the second one loops forever sounds like the right way to do it? Please look at the codepen and all should be made clear, on each 'repeat' of the master timeline there is a gap Thank you in advance ? I'm so sure it's something really simple that I'm overlooking!?!
  11. Hello professionals, I need Your help changing this animation for better performance. When I use this infinite animation on my website, I lose 20/30 fps from 60 fps. Can I change this CSS animation to GSAP animation? Would it be better performance? And if it would be, how I can make same skew infinite loop with GSAP? I tried to make it with GSAP but I can only make animation from left to right, how to make this skew motion? Thanks, Mantvydas
  12. Hello again, I'm back with another issue I'm facing. I am aiming to have a background that moves to give the impression of the sprite movement (essentially moving the viewport but not). To achieve this I have made repeating Tweens which move from one side of the page to the other and put them into timelines for X and Y. To get a feeling of speed I have been messing with the TimelineMax timeScale. The issue I have found is that going up (-ve timeScale) soon results in the timeline reaching progess = 0. This is likely to be an issue travelling left also. I have had a look at a similar topic here: however this has not worked well for me. I believe this is because I am not calling reverse(), rather I'm using negative timeScale. Does anyone know a fix for this that will work well, and is there a better way I should be doing this which would make it easier to repeat etc..? Thanks for your help Jareth
  13. Hi All I'm sorry if this is an easy solution but I couldn't find it and I'm totally new. I have several elements with an infinite rotation but for some reason is working only the first one. Here is my code: (function($) { var green = $('.green'), red = $('.red'), brown = $('.brown'), // tl = new TimelineLite(); tl = new TimelineLite(); tl .to(red, 3, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }) .to(green, 1, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }, "-=0.15") .from(brown, 3.5, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }, "-=0.15"); })(jQuery); Thank you so much for your help!
  14. Hi All, I've been banging my head against this for a while, I've been trying to use particle emitters, and about everything else I can think of but I need some help with this. Basically, I want to replicate the attached pen but have an infinite amount of creatures spawned along the bezier curve with no breaks. I'm able to repeat the animation obviously but there's always a break in the chain as it repeats. Any help would be greatly appreciated! Thanks, -Dave
  15. SteveZ

    Infinite Draggable

    Is it possible to create an infinite draggable loop using GSAP Draggable coupled with TweenMax? I'm creating an animation demonstrating a briefcase combination lock - the kind with three or four inline tumblers next to each latch on a briefcase that are rotated to form a combination. Only one number (an image-not text) appears on the face of the tumbler I made. Draggable works great when I move ("rotate") the tumblers to reveal the next successive number; but my image is a png file that is a vertical line of numbers from 0 thru 9. I would like the numbers to repeat or loop if I was to continue dragging the tumbler giving the impression that it loops around.
  16. Hey all, I currently have a header with some repeating background pattern. What im looking to do is make this repeating background pattern move towards right and bottom from a point of position: absolute; - in the same speed and in an infinite loop. You can see a dummy here - hope it somewhat illustrates what im looking to do: http://codepen.io/anon/pen/oapnB Initially my idea was to have it move in one direction first for like 10secs and then change to another direction - as the codepen illustrates. However lets just keep it simple: - Would anyone be able to tell me if im able to move my background pattern infinite in one direction? Right now I offset the background outside of the screen, so that I have some extra background to actually move around without it ending - im not sure how to adress that for an infinite solution - perhaps some resetting needs to be done? But in that case im not even sure how to do that so it looks in sync.
  17. Hello, Im trying to find away to infinitely scale an image. The only way i can think of is using a recursive function. I tried to use 'repeat: -1, but it just restarts the tween from the beginning value of the css property. start(); function start(){ TweenMax.to($(img), 4, { css:{ scale:'+=0.5' }, ease: Power0.easeInOut, onComplete: function(){ start(); } }); } I was wondering if there is a better way using TweenMax or TimelineMax to infinitely scale an image? Either using (transform) scale or width and height (css or dom). Basically I want to keep animating the value up, infinitely. By incrementing up, infinitely. Any help will be highly appreciated! Thank You!
  18. Hey guysso this is probably really easy and sorry ahead of time if this is a Repost. So im very new to this ive been reading up on how to use tweenLite and Max but im still really confused. So i have a MovieClip that gets added to stage when the user pushes play Game. I want this MovieClip to move Up and Down in a Linear path i want it to go on a infinite amount of times. My stage height is 480 if this is needed. I've tried this but it only goes up and doesnt come back down TweenMax.to(this, 5, { y: -480, yoyo:2 } ); What do i need to do to make it reverse its path and keep repeating this path?
  • Create New...