Search the Community
Showing results for tags 'loop'.
-
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.
-
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 ?
-
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.
-
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's finished the 3 loops, I don't want the last Tween to fire. instead stopping at the 2nd from last line Is this possible using a label or some such? Thanks
-
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.
-
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
-
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
-
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.
-
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
- 5 replies
-
- 2
-
-
- dashed line
- loop
- (and 1 more)
-
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
-
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 ?
-
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(); } } }
-
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.
-
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!
-
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
-
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?
-
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
-
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!
-
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 -
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.
-
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.
-
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!
-
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
-
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
-
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
