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. 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.
  2. 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
  3. 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 to create a loop, but unfortunately I don't have the knowledge to make a loop happen in this situation. So the code needs to work on 'portfolioVak2', 'portfolioVak3' ...... 'portfolioVak30'. The tweened elements will also change: '#portfolio-titel2', '#portfolio-titel3' etc. and '#portfolio-bekijk2', '#portfolio-bekijk3' etc. Thanks for your help, Roelof
  4. 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 can't work out how to loop the animation properly. I currently have it repeating with the {repeat-1} property set on the main timeline, but this isn't a true constant loop. I can't work out how to have it so the text on screen always moves up when leaving and always comes in from the bottom when arriving (this is proving particularly problematic at the end of the animation). Any help would be really appreciated. Many thanks, Emily.
  5. 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
  6. 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 50%", scaleY: 0.75, scaleX:1.5, ease:Power1.easeOut }, "squash") .to(rect[i+1], 0.2, { y: '-200', scaleY:1.3, scaleX:0.8, ease:Power1.easeOut }, "bounce") .to(rect[i+1], 0.15, { y: '0', scaleY:1, scaleX:1, ease:Power1.easeIn }) .to(rect[i+1], 0.2, { y: '0', scaleY:.8, scaleX:1.35, ease:Power1.easeOut }, "bounce-fall") .to(rect[i+1], 0.2, { y: '-100', scaleY:1.2, scaleX:0.8, ease:Power1.easeOut }, "second-bounce") .to(rect[i+1], 0.15, { y: '0', scaleY:1, scaleX:1, ease:Power1.easeOut }, "final-position") I want to loop this animation for every rectangle (there are 16) with a delay of 0.5 seconds between each rectangle falling. How can i achieve this? Thanks in advance
  7. 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, after reading forum I tried react-gsap-enhancer but well It didn't solve my issues. One of my goals was to have some SVG element animation in a loop inside different components and containers all getting their props from redux store. What happened is that loop were working fine at first but at some point after some rendering due to game activity loop animation stopped definitely... , I solved some of those issues by creating a react component (not stateless) for each svg I wanted to animate, using ref callback to get the element and starting the animation when componentDidMount() and preventing the component the rerender using shouldComponentUpdate(){return false} in order to prevent react from rerendering the component on every tick of a timer for example. So I thought I found a solution, I got my simple animation loop going in background only tweening 1 or 2 attribute like scale, a total of 5+ animation loop. Thats when I started to realized that the app got slower and checking the CPU usage it was at best around 140 just in idle mode (only open the web page), i removed all loop and it was back to 0 in idle mode. Thus here I come asking for help..., I do need animations for the game... I was about to go premium so I could add even more animation like particles and text animation... but now I do not know what I can do to prevent animation from killing players CPU also the game main target will be mobile phone... Is there anyway to hire a GSAP expert to look into those issues ? (please note its an indie game not so much $) Has anyone managed to make react and GSAP play well together to animate a bit more than just a svg rectangle or circle... but complex SVG with hundreds of paths ?
  8. Hi, I have used this script to animate a loop. The end animation look fine and everything seems to work. But when i open the JS file with Adobe Dreameweaver I get many complaints (missing semicolon, ’text2’ is not defined, and missing ’used strict’ statement). Do I need to be worried? Best, Ava window.onload = function () { var tl = new TimelineMax({repeat:-1}); loop = 0; loopMax = 3; tl.to(text1, 1.2, {top:0,opacity:1,ease:Power4.easeOut}) .to(text1, 1.2, {delay:.6,top:600,ease:Power4.easeIn}) .to(text1, 0, {top:-600,ease:Power4.easeOut}) .to(text2, 1.2, {top:0,opacity:1,ease:Power4.easeOut}) .from(text3, 1, {top:0, opacity:0,scale:0,ease:Bounce.easeOut}) .call(loopCheck) .to(text3, 0.5, {delay:1.2,opacity:0,scale:0,ease:Power4.easeOut}) .to(text2, 1.2, {top:600,ease:Power4.easeIn}) tl.timeScale(1) function loopCheck() { console.log("loopCheck") loop++; if (loop < loopMax) { console.log("play again") tl.play(); } else{ console.log("done") tl.pause(); } } }
  9. I have code that looks something like this http://codepen.io/anon/pen/XjgVWN . The problem is, that addPause overwrites previous added addPause (with same time), and the callback is gone. Any tips how to make this work? How can I get both callbacks in same time? P.S. I cant create a Master function, with sub-functions in my case :/, my real project code is very dynamic.
  10. Hi, I'm having an issue using TimelineMax with a loop repeat. The animation works fine but sometimes there's some sort of "flashing" in the animation. It looks like the div inside is repositioned for a millisecond in the wrong place. I cannot understand why this happens and why it happens randomly. I linked a Codepen working example. Any ideas? Thanks!
  11. Hi guys, I have these timelines that's very similar and I'm wondering if it's possible to loop through them or something to have a cleaner code? This is what I'm working with: var rt_step1 = $('.contact_module2016 .step1'), rt_step2 = $('.contact_module2016 .step2'), rt_step3 = $('.contact_module2016 .step3'), rt_step4 = $('.contact_module2016 .step4'), rt_step5 = $('.contact_module2016 .step5'), step1Timeline = new TimelineMax(), step2Timeline = new TimelineMax(), step3Timeline = new TimelineMax(), step4Timeline = new TimelineMax(), numbers = ["step1Timeline", "step2Timeline", "step3Timeline", "step4Timeline"]; step1Timeline.to(rt_step1, 0.6, {autoAlpha: 0, display:'none', ease: Expo.easeInOut, y:-30}) .to(rt_step2, 0.6, {autoAlpha: 1, display:'block', ease: Expo.easeInOut, y:0}); step1Timeline.pause(); step2Timeline.to(rt_step2, 0.6, {autoAlpha: 0, display:'none', ease: Expo.easeInOut, y:-30}) .to(rt_step3, 0.6, {autoAlpha: 1, display:'block', ease: Expo.easeInOut, y:0}); step2Timeline.pause(); step3Timeline.to(rt_step3, 0.6, {autoAlpha: 0, display:'none', ease: Expo.easeInOut, y:-30}) .to(rt_step4, 0.6, {autoAlpha: 1, display:'block', ease: Expo.easeInOut, y:0}); step3Timeline.pause(); step4Timeline.to(rt_step4, 0.6, {autoAlpha: 0, display:'none', ease: Expo.easeInOut, y:-30}) .to(rt_step5, 0.6, {autoAlpha: 1, display:'block', ease: Expo.easeInOut, y:0}); step4Timeline.pause(); This is what I'm trying to do but I get the error that numbers is not a function. Anyone done this before? for (i = 0; i < numbers.length; i++) { numbers[i].to(rt_step1, 0.6, {autoAlpha: 0, display:'none', ease: Expo.easeInOut, y:-30}) .to(rt_step2, 0.6, {autoAlpha: 1, display:'block', ease: Expo.easeInOut, y:0}); numbers[i].pause(); } Thanks so much for your attention and all the help
  12. Hi guys, I think I've encountered a rendering issue while animating two images on the X axis with the xPercent property. When I'm resetting the image's xPercent property position to create an infinite image slide effect, sometimes the images are not fitting together correctly or there is a gap between them. Any suggestions on this one?
  13. hello folks first post. and first of all – thank you for the nice work so far. i'm really glad to use all of your stuff. i want to create a fullpage.js like slider based on gsap. i used a couple of resources to build a prototype. the problem: it’s hard to get slides and sections in a loop. it works for vertical navigation, but i have no idea for the horizontal navigation. would be great to get some hints or even modifications / better solutions. best regards jakob
  14. Anyone know how to loop the circle animation. I tried adding (yoyo: False) to each of the lines but they're only looping their respective parts. I'm trying to get the circle draw on and have the draw off be in the same direction. Thanks!
  15. Hallo, I've tried the follwing code: var i = 0; var tl = new TimelineLite({ onStart:function() { i++; if (i <= 2) { this.set({}, {}, '+=1.0'); this.to("#firstitem,#seconditem", 1.0, {autoAlpha: 0,ease:Power1.easeInOut}); } },onComplete:function() { if (i <= 2) { this.restart(); } } }); tl.from("#firstitem", 1, {autoAlpha: 0, x:100,y:-100,scale:3.0,ease:Power1.easeInOut}); tl.from("#seconditem", 1, {autoAlpha: 0, x:50,y:-50,scale:3.0,ease:Power1.easeInOut}); // ... and so on But it won't work. The first time OnStart is fired it changes the timlines for all following loops, included loop 3. Thats what I'm trying to get: After every loop all animated elements has to fade out, except for the last loop. All animated elements should stay. Because of filesize I have to realise this with TimelineLite. Thanks for your help! Beste regards Christi4n
  16. Hai What i am trying to achieve is to infinite loop the scroll animation. I tried with some basic looping. But is it the right way of doing this. Also it is having responsive issues and there is a delay when after every slide starting. I tried as much as i can to make it working.
  17. Hello!. Here is an example - http://codepen.io/kickflip2009/pen/LNBXOQ When i click on the image, all blocks with class 'content" appear, but i want to animate specific block which is under the image. Sorry for my English.
  18. Hi, I'm quite new to GSAP and I wonder what the easiest way to loop a timelineLite would be? I've managed to loop separate tweens inside the timeline but not the whole timeline. TIA!
  19. When adding a tween with a negative offset, but with a duration that does not exceed the previous tween, things start to behave weird when restarting the timeline. I created a small codepen example to demonstrate this. It seems like the first tween does not get overwritten by the second tween but only after the first tween finished for the first time. [edit] using relative ("+=100") or absolute (100) values does not make any difference [edit2] using tl.reverse(); instead of tl.restart() breaks the animation entirely
  20. Hi all, I read many posts about loop animation and I manage to make one to work, but I believe there is a better way to do it, so if you can have a look and this demo http://codepen.io/anon/pen/ojJEmx and let me know how to make it better it will be great. Kind regards, Fernando Fas
  21. Hi all - this is my first post on GSAP, hope you guys can help me. Love GSAP by the way, it is awesome. I'm using Reveal EventListeners (https://github.com/hakimel/reveal.js#slide-states) to trigger timeline sequences. These sequences are a combination of staggerFrom and from, and I use DrawSVG with Yoyo sometimes too. I found this example that pretty much matches my setup: http://stackoverflow.com/questions/23936987/how-to-trigger-a-gsap-function-when-a-slide-comes-active-with-reveal-js Here is one of the sequences, they all follow the same structure: Reveal.addEventListener('slideName', function () { tl = new TimelineMax(); tl.staggerFrom("#aSlideElement", 9, { rotationY: 1080, scale: 15, y:"-1900px", x:"600px", ease: Power4.easeInOutQuint }, 0.7) .from("#anotherSlideElement", 9, { onUpdate: cssFilterTween, onUpdateParams: ["{self}", "blur", 100, 1], ease: Power4.easeInOutQuint }, 0) .from("#yetAnotherSlideElement", 10, { fill:"#0f0c31", ease: Power4.easeInOutQuint }, 5) .from("#soManySlideElements", 4, { autoAlpha: 0, ease: Power4.easeInOutQuint }, 10) }, false); Reveal is basically a presentation slides framework and each slide has its own sequence that is triggered using an eventlistener. My problem is these sequences do not completely reset the timeline and all the elements when you 'leave' a slide. This means if you go back and forth between slides, the elements are sometimes misplaced, finish in the wrong position or get muddled start/finish timings. Eventually they just slow to a halt and do nothing. I have to refresh the page to get it back to where things started. I've tried restart(), clear(), remove(), kill(), pause(0), etc. I've tried placing 'overwrite: 3' amongst each tween. I've tried placing a single global timeline above the eventlisteners, rather than create a new timeline for each slide. I think it may be something to do with the volatile triggering that occurs when quickly going back and forth between slides, but I assume GSAP should be pretty quick at resetting? Any help would be awesome, this is really puzzling me. Thanks, James
  22. I'm drawing a large shape using an array of points in a for loop and tweenlite as found at http://www.flashperfection.com/tutorials/Animated-line-drawing-using-TweenLite-in-AS3-22013.html for(var i:uint = 0; i < pointsArray.length; i++){ TweenLite.to(dot2, .05, {x:pointsArray[i].x, y:pointsArray[i].y, delay:i*.05, overwrite:false, onUpdate:updateHandler}); } function updateHandler():void{ lineAnim.graphics.lineTo(dot2.x, dot2.y); lineAnim.graphics.moveTo(dot2.x, dot2.y); } I would like the animation to complete before continuing, but I'm unable to find a way to be notified when the full animation is complete. onComplete does not work as it triggers on the first set of coords. I also tried triggering when i == pointsArray.length but the loop finishes multiple seconds before the animation completes. I would like to avoid using a timer.
  23. Hello, I'm trying to loop a video and the video loops, but not at the end of the video, it's cut at approx 50% of the video. The video is 4 seconds long and at the half it just jumps to the end and starts the loop again. Any idea in how to prevent that? I'm loading the video with this line: var lVideoPlayer:VideoLoader = new VideoLoader("assets/myVideo.flv", {name:myVideo.flv,container:videosParents[_videoNdx], autoPlay:false, requireWithRoot:this.root, deblocking:1, repeat:(_videoNdx==1?-1:1),onComplete:_onConnect }); I would need perfect seamless loop, but hopping that way is hard. At the same time, the video triggers 2 events, right now I'm tracking that events using VideoLoader.PLAY_PROGRESS but perhaps it would be more efficient using cues? Well, thank you in advance, Toni
  24. What is the best way to handle child timelines that have a infinite duration? You can't just `TimelineMax.add` an infinite child timeline because they would block and cause the remaining events to never run in the root timeline. The best way I have found is `restart`'ing the infinite child timeline in an `onStart` or `onComplete` event. One problem I have run into with this method is, if you seek past when the child timeline gets initiated, then it will never run. When using `start`, `stop`, `seek` on the root/parent timeline, how do you `start`, `stop` the child timeline appropriately? Here is a basic example of an infinitely spinning ball that also translates around on the root timeline: http://codepen.io/anon/pen/vOpBEV let tl = new TimelineMax(); let ballNode = $('.ball'); // Set up the infinite rotating timeline let alwaysRotateTl = new TimelineMax({ repeat: -1, paused: true }); alwaysRotateTl .fromTo( ballNode, 2, { rotation: 0 }, { rotation: 360, ease: Linear.easeNone } ); // Now do some stuff on the main timeline tl .addLabel('red-label') .set( ballNode, { backgroundColor: '#ff0000' }, 0 ) .to( ballNode, 2, { x: 100, backgroundColor: '#00ff00', onComplete: function() { // Start the infinite rotate loop alwaysRotateTl.restart(); } }, 'green-label' ) .to( ballNode, 2, { y: 100, backgroundColor: '#00ffff' }, 'cyan-label' );
×