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

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. 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 a
  2. 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 co
  3. 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 loopCou
  4. 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)"
  5. 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
  6. How do I execute a function after an animation has completed? I've got a simple animation: I grab an element, and then I animate it. Lets say my animation function is called changeState(). I want to do this sequence: 1. changeState() 2. selectNextElement() 3. changeState() selectNextElement() should only run once changeState() has completed it's animation sequence. Here's my stub for changeState: // get current block and animate it function changeState() { var currentBlock = $(".current") ; // colortween the current block var tl = new TimelineMax() ;
  7. 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
  8. 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
  9. 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;
  10. 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(){}}); }}); }}); }});
  11. 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
  12. 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
  13. 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
  14. 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...
  15. 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 h
  16. Hi, How can I fix my animation ? The last div is not follow by the first I play with delay, repeatDelay, position… Maybe I need a good trick ? Clone the first to the last and jump in the animation position ? How To ?
  17. Hello I have a list of items, using a stagger as it load on the page (going to use it with scroll) - this is fine. But then I am also trying to apply an animation when hovering over one item. I have it all in the CodePen. After trying a few things myself, I ended up looking at this example: For some reason, when I hover on one it still apply the animation on all list items. Not sure if I am selecting something wrong / missing something. Any ideas? Thanks in advance.
  18. Hi there, I have a banner that loops 3 times: var tl = new TimelineMax({repeat:3}); tl.append( TweenLite.from($(".text1"), 0.5, {alpha:0})); tl.append( TweenLite.to($(".text1"), 0.5, {alpha:0}),"+=2.5"); tl.append( TweenLite.from($(".text2"), 0.5, {alpha:0}) ); tl.append( TweenLite.to($(".text2"), 0.5, {alpha:0}),"+=2.5" ); tl.append( TweenLite.from($(".tele"), 0.5, {alpha:0}) ); tl.append( TweenLite.to($(".tele"), 0.5, {alpha:0}),"+=2" ); tl.append( TweenLite.from($(".endframe_logos"), 0.5, {alpha:0}) ); tl.append( TweenLite.to($(".endframe_logos"), 0.5, {alpha:0}),"+=4" ); After it'
  19. I'm trying to make a looping Draggable that snaps and only moves one step at a time. The problem is that with throwProps switched on, the user can throw it more than one 'step' at a time, and with throwProps switched off it doesn't snap at all. I used this pen as a starting point: http://codepen.io/osublake/pen/ee107aeb54bdf4dca1084715d86b5e9c Here's where I've gotten to: http://codepen.io/lewisSME/pen/mWQoye Any help greatly appreciated.
  20. Hi! I have a HTML5 banner advertisement that I'd like to automatically replay the animation on a loop. Is this possible? I have attached the HTML5 banner advertisement source files. Please let me know how to accomplish this. Thank you for your help! 120x600_v2.zip
  21. Hi, I created a simple roll-over effect for multiple elements on a webpage: portfolioVak1 = $("#portfolio-vak1"); // Rollover Tweens portfolio portfolioTween.to('#portfolio-titel1', 0.3, {y: "-=20px", delay: 0.1}).to('#portfolio-bekijk1', 0.3, {y: "-=43px", delay: 0.1}, '-=0.3'); portfolioVak1.mouseenter(function(){ portfolioTween.play(); }); portfolioVak1.mouseleave(function(){ portfolioTween.reverse(); }); This works perfectly! But now I want this exact same effect to happen on 30 elements on the same page. Off course, the most clean way to do this would be
  22. Hi I would like to create an animation where the text slide ups vertically to be replaced with some coming in from below. I would like this to happen on a loop. Here is a codepen for where i've got to so far, before getting stuck http://codepen.io/emilychews/pen/qRENKR The problems I have are: i) The last tween on the timeline seems to be setting the first text div lower in its container prior to the animation starting (you may need to refresh the page to see this properly). When the animation starts this does correct itself, but I need to find out how to prevent this. ii) I
  23. Hi! I wanted to create a dashed line with an infinite loop, I finally have the result I wanted with just a few lines of code (took a few hours to understand the relationship between the code elements as I have no experience with JS at all). Before I implement it into my website I would like to know if I did it correctly. Thanks for checking out my code! Here is my CodePen: https://codepen.io/coenhallie/pen/EZaRyp Cheers, Coen
  24. Hi, I have a question about looping and delaying some elements. In the codepen link I provided will be an example of what I want to achieve. The problem is that I don't know how to loop the code... If I paste the code 16 times it will work for all of the rectangles. Is it possible to make a loop with TweenLite? This is a part of my code: var rect = document.querySelectorAll('.rectangle'); i = 15; var tl = new TimelineLite(); tl .from(rect[i--], 0.3, { y: '-1000', scaleY:5, ease:Power1.easeIn }, "fall") .to(rect[i+1], 0.15, { transformOrigin: "bottom 5
  25. Hello, First thanks for this nice library and fine the documentation you produced. I am working on a 2D SVG game built with react.js. Why react? Because its something I have already used and know and also because react.js is the hot lib nowadays... Turn out that I needed a solution to animate my SVG, I first tried plain CSS animation but the result weren't the same in different browser or platforms so I spent some time to look for a more robust solution and I end up going for GSAP. I quickly found out that GSAP and React aren't the best friend but things could be worked out,
×