Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'loop'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

  • FAQ

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. 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
  2. Hi, I'm having trouble getting the animation to repeat smoothly thanks.
  3. Hi there! I am trying to create a scrolled roulette that gets triggered twice, once at the beginning of the main timeline and again later on the other half of the main timeline. I was not able to use several callbacks for the roulette function, so i just called the roulette outside of the main timeline, then the main timeline and somewhere in the half of it i use a callback to the roulette function. however, every time you scroll back and forth and trigger the callback, the function adds to the previous one(s) so you end up having roulettes all over the place. Also by calling the roulette in the callback, the headers come from the top instead of from the bottom. I guess the callback is not the solution I was looking for to trigger the roulette in the middle of the main timeline? but i wasnt able to find another solution so far. If someone could point me in the right direction, I would be very thankful. Also thanks in advance for having the patience to look into this, because it is my first gsap project and I still miss a lot of basic concepts, so I'd be more than happy if you just tell me what I could be missing to keep looking for my self and I'll post the solution as soon as I come up with it.
  4. Hello hello! I'm might not have an entirely question now but I would like to hear opinions to where to go in order to achieve my goal. I have a project with animations happening with ScrollTrigger. I would like to control the scrolls when it reaches the bottom or the top. - If reaches the bottom, the scroll is positioned in the top - If reaches the top, the scroll will be positioned in the bottom of the page This way the animations controlled by the ScrollTrigger will always seem in loop accordingly to the scroll. Looking into the examples I found this loop: https://codepen.io/GreenSock/pen/LYRwgPo It's very complex for what I need, but I was trying to understand it and to apply perhaps the same concept. One of the problems I'm facing is the easing, it would need to pause an animation, reset to the position y:0, for example, and finish the left easing time. Any idea how I could apply the same loop concept to my need?
  5. 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.
  6. Apologies for starting yet another "carousel" related topic, but I was hoping some of the brilliant minds here could help me out. Is there a way to use GSAP to create an infinite looping "carousel" style animation that doesn't repeat the first element in the list, like this embedded CodePen? Mind you: I'm not looking for fancy controls to start or stop or reverse anything, just a simple, clean way to loop a bunch of items that also makes sense in a screen reader type of environment—no repetitions of items in the source code.
  7. Good day, I am trying to figure out a way to have the animation run individually by the same class. I read the page about the common mistake on the loop but still couldn't figure it out. I know Im supposed to use the array but code did not run. can someone help me please?
  8. 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.
  9. The animation is not looping smooth/continuously because of the delay in the end. How can I make it not stop for a second in the end of the animation like it does on the Codepen?
  10. 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~
  11. I have a draggable slider/"panner" that is constructed a little differently due to some demands: - It has to work with percentage widths for the slides / flexbox - It has to work with differing slide widths This has worked all right in my solution, but now I'm trying to "loop" the slider and all examples I can find are using a draggable connected to a tween's progress and I'm not able to see how I can make this work in my situation. Any pointers here? I'd suspect I'd have to do some dom manipulation by moving the first slide to the end etc but I'm not really sure where to start. Any and all advice appreciated!
  12. Hey, I should tell u guys I'm very basic at javascript let alone Jquery. I ve been experimenting with scrollmagic and gsap, but now i'm stuck and could use your help please. I want to achieve the following: When u scroll into section 2, there should start a picture slideshow on section 3. I want it to keep running until section 3 reaches the top and on scrolling then the slideshow should plit into two specific pictures that in turn go left and right, while the section is pinned. It all looks kinda ok( dunno about the code: I try to keep it as simple as possible so i really understand it:)). The only problem is the slideshow itself...i couldnt keep it looping without having somekind of delay when it finishes the first time and restarts. Then i tried reversing it, but that also gives a delay.How can i fix this? Also if u scroll really fast from top to section 3 the pictures arent loaded yet and then the left right split animation is messed up. Im guessing i could fix this by letting the animation start earlier( on pageload), but I wonder if theres another solution. (Seems weird running an animation in background while nobodys on that section) Sonny
  13. Hi guys, I’m developing my website using Squarespace which is very templated but I have managed to add quite a bit of customisation learning some basic html, css and js coding. I’ve come across an animation that I really like in https://www.thomasdemonaco.com/ and I thought that I could do something similar using gsap. For a start I’m trying to do a simple verical loop - Squarespace will have pictures stacked on the viewport - but after trying so many different things, I cannot get find a solution. The repeat will start from the beginning and not loop. Attached is the codepen. Zach kindly helped with with initial code, I wish I had found a solution! Any help would be much appreciated. Thanks Laurent
  14. Hi guys, this is how i normally created my loops in my banners before gsap3: // ... tl.addCallback(function(){ if(loopCount < 3){ loopCount++; // fade out elements }else{ tl.pause(); } }); Now, that addCallback is not present anymore I use "call()", but the ad does not loop correctly, but only two times. Is "call" not being processed in every loop of the timeline? This would be my whole timeline. Also notice the "tl.to({}, 0.1, {});" in the end, which is needed to avoid a flickering when looping. This was not the case in gsap2 as well. var loopCount = 0; var tl = new TimelineMax({paused:true, repeat:-1}); tl.timeScale(1.2); //fr1 tl.from('#logo', 1, {scale:1.2, opacity: 0 }); tl.to({}, 2, {}); tl.from('.line, .line2', 0.2, { opacity: 0 }); tl.to('.cls-1', 1.2, { 'stroke-width': 102 }); //fr2 tl.from('#bg-blue', 3, {opacity: 0}, 'kaas') tl.from('#stuk1', 0.2, {opacity: 0}, 'kaas'); tl.from('#shop', 0.5, {y: 50, opacity: 0, ease:Back.easeOut},'kaas'); tl.from('#stuk1_shade', 0.2, {opacity: 0}, 'kaas'); tl.from('#stuk2r', 1.3, {x: -72, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stuk2l', 1.3, {x: 72, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stuk3r', 1.5, {x: -121, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stuk3l', 1.5, {x: 121, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stoerer', 0.5, {scale: 0.5, opacity: 0, ease:Back.easeOut}, 'kaas+=1.2'); tl.to({}, 1, {}); tl.to('#stoerer', 0.2, {scale: 0.95, yoyo: true, repeat: 3}); tl.to({}, 2, {}); // loop tl.call(function(){ if(loopCount <= 5){ loopCount++; tl.set('.cls-1', { 'stroke-width': 14 }); tl.set('.line, .line2, #logo', { opacity: 0 }); tl.to('#frame2', 0.5, {opacity: 0}); }else{ tl.pause(); } }); tl.to({}, 0.1, {}); What am I doing wrong? Thanks!
  15. Hi! Help me please!)) Now I have loop animation to the right. If I click "Left(reverse)" animation go to the left, but animation stops. What I need do that animation works loop and when i click" Right(play)" and when I click "Left(reverse)"
  16. Hello, I'm trying to loop a "shake" animation of my drop-area as long as my droppable item is dragged. The animation should start 2sec after an item is dragged and should be repeated every 2 seconds. I found a few pens/topics but none of them could make it works. As you can see, I tried using onPress/Release, but it's still not working, and I have a shake animation after page loaded, which I don't want. Is there a way to do that ? Quentin
  17. Hey! Longtime user, sometime-poster. I'm working on some ads that have a replay button. I have a secondary animation that plays at the beginning of my main timeline. That secondary animation is generated by a function that returns a timeline, and is called using add(). Secondary animation looks something like this: function makeWaves() { var tl = new TimelineLite(); tl .add('start', 0) .fromTo('#wave1 .teal', 10, {drawSVG:"0 35%"}, {drawSVG: "0% 95%"}, 'start') .fromTo('#wave1 .navy', 10, {drawSVG:"35% 100%"}, {drawSVG: "95% 100%"}, 'start') .fromTo('#wave2 .blue', 10, {drawSVG:"0 30%"}, {drawSVG: "0 90%"}, 'start') .fromTo('#wave2 .navy', 10, {drawSVG:"30% 100%"}, {drawSVG: "90% 100%"}, 'start') .to('#wave3 .blue', 10, {drawSVG: "80%"}, "start") .to('#wave3 .navy', 10, {drawSVG: "70%"}, "start+=2"); return tl; } Main timeline looks like this: this.timeline .addLabel("start", 0) .to(this.miranda, 0.6, {autoAlpha: 0}, 3.5) .add("f1", 3.7) .add(makeWaves(), "f1") //... more awesome animation When I hit the replay button, which calls timeline.restart(), my secondary animation doesn't fire. I tried setting timeline.restart(false, false) to avoid suppressing callbacks, but no dice. I also tried using exportRoot(), but I've never really been 100% sure how that works. Maybe I'm misunderstanding the use-case for this feature? Anything jump out at you guys that I might be missing? This seems implausible, but any reason using drawSVG would be part of the problem? I might try to put up a CodePen, but this is agency work, which is NDA'd by default, so I don't think I can share it publicly. Thanks guys!
  18. Hi all... Is there anyone here??? I've found a simple but useful code developed a few years ago... it loads 2 swf files in sequence ... But I have just one question... How can I Loop them? How can you change the code to load swf1 after swf2 is finished? I've tried almost the whole day but no result yet... Please help... thank you a lot... import com.greensock.*; import com.greensock.loading.*; import com.greensock.events.LoaderEvent; import flash.events.Event; //create SWFLoaders var swf1:SWFLoader = new SWFLoader("child1.swf",{container:this,y:100,onProgress:progressHandler,onComplete:completeHandler,autoPlay:false}); var swf2:SWFLoader = new SWFLoader("child2.swf",{container:this,y:100,onProgress:progressHandler,onComplete:completeHandler,autoPlay:false}); var currentSWFLoader:SWFLoader = swf1; //adjust the progress bar; function progressHandler(e:LoaderEvent):void { bar.scaleX = e.target.progress; trace(e.target.progress); } //tell the loaded swf to play and start tracking frames function completeHandler(e:LoaderEvent):void { //the target of the LoaderEvent is the SWFLoader that fired the event //the rawContent is the loaded swf e.target.rawContent.play(); addEventListener(Event.ENTER_FRAME, checkFrame); } function checkFrame(e:Event):void { //check to see if loaded swf is done playing if (currentSWFLoader.rawContent.currentFrame == currentSWFLoader.rawContent.totalFrames) { trace("swf done playing"); removeEventListener(Event.ENTER_FRAME, checkFrame); //if the first swf is done playing load the second swf if (currentSWFLoader == swf1) { currentSWFLoader.dispose(true) // dispose and unload content currentSWFLoader = swf2; currentSWFLoader.load(); } } } bar.scaleX = 0; currentSWFLoader.load();
  19. Hi I have a looping animation. After all the loops is finished i want to end up with a box/image that is not in the loop? How can i do that My start is something similar to this;
  20. how to repeat this kind of callbacks based animation, I cant repeat this entire animation, each tween start based on callback please answer this problem TweenMax.to(".div1",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){ TweenMax.to(".div2",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){ TweenMax.to(".div3",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){ TweenMax.to(".div4",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){}}); }}); }}); }});
  21. ajando

    Loop certain area

    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
  22. https://staging.thebirdthebear.com/ I'm working on this particular animation, and having some issues. It's a four-branch frilly thing that is supposed to reveal each branch. Triggered with Scrollmagic. You can see it working properly on the first iteration in the section "OUR CRAFT." Each branch is being revealed by removing the respective mask. My issue however, is that the animation is not animating on the second iteration, "BRYAN & CARYN." The masks in the SVG are called out as IDs, but the paths inside the masks are Classes (they're what are being called here in the code below). I'm not sure if that's the issue or what... Thoughts? const branchDraw = function() { const layerOneMask = document.querySelectorAll(".layeronemask") const layerTwoMask = document.querySelectorAll(".layertwomask") const layerThreeMask = document.querySelectorAll(".layerthreemask") const layerFourMask = document.querySelectorAll(".layerfourmask") const tl = new TimelineMax() for ( var i = 0; i < layerOneMask.length; i++ ){ tl .from(layerOneMask[i], 0.5, { drawSVG: 1, ease: Power2.easeOut }) .from(layerTwoMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25") .from(layerThreeMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25") .from(layerFourMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25"); const scene = new ScrollMagic.Scene({ triggerElement: layerOneMask[i], offset: -300 }) .addTo(controller) .setTween(tl) } } branchDraw()
  23. Hey guys, I'm creating a banner, which will play 3 times (loop 2), and use GSDevlTools. The bannerflow is like this: Intro, Scene 1, Scene 2, Scene 3, Outro Scene 1, Scene 2, Scene 3, Outro Scene 1, Scene 2, Scene 3 So after the first loop Intro should be removed, and the last loop should not play the Outro. My issue here is, that i cannot figure out a way to write the code, so it also works with GSDevTools. - the final timeline is not showing the correct length. I've tried with var master_timeline = new TimelineMax(); master_timeline .add(intro()) .add(scene1()) .add(scene2()) .add(scene3()) .add(outro()) .add(scene1()) .add(scene2()) .add(scene3()) .add(outro()) .add(scene1()) .add(scene2()) .add(scene3()) ; But that makes it very messy writing the scenes.. - i cannot use .from at all because, the it conflict with the scenes later on. Then i've tried with var master_timeline = new TimelineMax({repeat:2, onRepeat:check_replay}); master_timeline .add(intro(), "intro") .add(scene1(), "+=0.5") .add(scene2(), "+=0.5") .add(scene3(), "+=0.5") .add(outro(), "outro+=0.5") ; function repeat(){ master_timeline.remove("intro"); } Which does not remove the intro. Then i've tried var master_timeline = new TimelineMax({onComplete:repeat}); var loops = 0; var max_loops = 3; master_timeline .add(intro(), "intro") .add(scene1(), "+=0.5") .add(scene2(), "+=0.5") .add(scene3(), "+=0.5") .add(outro(), "outro+=0.5") ; function repeat(){ loops++; if(loops == 1){ master_timeline.remove("intro"); } else if(loops >= max_loops){ master_timeline.remove("outro"); } master_timeline.restart(); } Which it does not remove any of the labeled scenes, and the GSDevTools timeline, does not show the correct maxtime. I'm really out of solutions, so i would be very happy if any of you guys have a solution, or just a hint which can lead me in the correct way. Best regards Christian
  24. Hi, What is the trick to get the timeline to carry on after the below tween loop in timelineMax? .from(".class", 1.5, { y:-100, repeat:-1, repeatDelay:3, yoyo: true}) I've not been able to find one for love nor money...
  25. Hi everybody, first time posting here. I've created this example on CodePen to loop a certain part of an animation consisting two frames. I did this by declaring two variables as two separate timelines (TimelineLite and TimelineMax), and then called the function to replay the second frame only. You can take a look at how I wrote this by referring to the CodePen link. I'm still learning both GreenSock and JavaScript, and I feel I've come a long way, but I'd like to know is there a better way to code this without using multiple timelines? Even though I'm satisfied with how the code works, I'm open to feedback if there is a neater way to write this code.
×