Search the Community
Showing results for tags 'cycle'.
Found 13 results
-
I'd like to rewrite my image cycle animation using GSAP's latest code. It's cleaner, plus I want to attach it to the new ScrollTrigger, and fire the animation when it reaches a certain point on screen, and pause when its not in the viewport. However, I'm having a difficult time getting it to work. I've found examples using the deprecated cycler, and others using some nifty staggers. I got close with my code, but I just can't get rid of the fade (I'd like the active image to just appear without a transition, and have it stay visible for a fraction of a second). Bonus kudos if someone can help the cycle accelerate until a maximum. @swampthang and @OSUblake both seemed to get this to work by adding a timeScale fromTo tween on the timeline itself https://codepen.io/swampthang/pen/dpqyzO and https://codepen.io/osublake/pen/epLjrG. But, is that possible to do if the animation is going to be triggered by the ScrollTrigger?
-
I'm trying to make this codepen example into React. But unable to do it with new version of Gsap and also new to GreenSock's animation. Here is the current React example in sandbox: https://codesandbox.io/s/cool-forest-ddzft?file=/src/drag.js
-
Hey guys I may be blind, but is cycle method supported in the gsap3 release? Can't seem to make it work the old way. Thank you!
-
Hey everyone, I was staggering some elements from the middle by using cycle and a delay function. Diaco showed me this formula a couple years ago. return Math.abs(Math.floor(yourElements.length / 2) - i) * 0.25; This works great for an odd number of elements, but with an even number of elements the middle two should start at the same time so this function doesn't work correctly. I came up with a new formula for an even number of elements. return Math.floor(Math.abs(yourElements.length / 2 - 0.1 - i)) * 0.25; That seems to work just fine. I'm just using the modulus operator to figure if the element list length is odd or even and then using the appropriate formula to return the correct value. My question is can anyone think of a way to calculate it with one formula whether it's odd or even? I'm thinking I'm gonna need two different formulas which is no big deal, but wanted to make sure I'm not missing something obvious here. Happy tweening.
-
Hi, I'm trying to stagger in a series of boxes with opacity. Maybe the cycle feature is an overkill for this but I'd like to learn how to use it. All of the tutorials I've found on the cycle feature seem a bit complicated. Is there an example of a simple staggerTo with cycle in a regular timeline anywhere? var tl = new TimelineMax(); tl.to(".circle", .5, {opacity:-1}) .staggerTo(".boxes", 1, { cycle:{ opacity:[-1, 1] ease: [Power4.easeInOut] } }, 0.05) .to ..... -thanks
-
Hey everyone, is there a way to use cycle on the length of time for a staggerTo? For example, I know this doesn't work, but it may illustrate the effect I am trying to get. TweenMax.staggerFrom([myItem1, myItem2, myItem3], cycle{[1, 2, 3]}, {rotation:90}, 1); I'm trying to adjust the length of time each item is animated over, myItem1 would take 1 second, myItem2, would take 2 second, etc. Thanks in advance for any help.
-
Hello! Is there any way that I could manipulate the duration of each tween in a staggerTo() function? Thanks!
-
First off, I love this library and have been using it forever! Just took the plunge on a membership to support your efforts. Now on to the problem. I'm trying to animate the offset values of a gradient but I'm not able to for some reason? I successfully used the same method to animate stopColor, but no dice on offset. I've tried using a few methods but the example is using cycle. What am I doing wrong here? Please see the codepen below: http://codepen.io/Jerbach/pen/PzBXxa
-
Hi all, In my codepen attached I have each box randomly positioned, and then I am running a timeline that staggers through from opacity 0, then a left or right movement, then goes to opacity 0 again. At the moment this is staggering through, but what I want is for each box to run as their own timeline and in sequence. So I want the first one to fade in from 0, move it's "cover", then fade out to 0. Then the next one would do that same animation. I attempted to use an each function but couldn't seem to get it to work right. Any solutions? Thanks, Oliver
-
For fun I modified an old jQuery plugin I wrote to create modal dialog boxes so I could try out some of the new features in GSAP 1.18. My goal was to create a plugin with the following features: Automatic sizing regardless of dialog contents. All the standard features you would expect from a dialog plugin. GSAP animation using splittext and cycle. A simple method to change the coloring scheme of the dialog without changing the underlying css or requiring a complex string of styling options. To achieve this I utilized the relative HSL feature. So far, I am pretty happy with the results so I thought I would share it with the community. Feel free to fork any improvements, additions, or corrections. If anyone finds this usefull, let me know and I will add it to Github as a jQuery plugin once I have had a chance to review and finalize the javascript. I also attached the js file for the plugin since the js on Codepen is minified. http://codepen.io/hackfin/pen/mVwywQ alphaDialogCodepen.txt
- 5 replies
-
- 2
-
-
- jquery plugin
- cycle
- (and 1 more)
-
We're trying to use TimelineLite to create a cycle of images. We want to show one image at a time, fade between them, and at the end, cycle back to the first one and repeat. We are getting various results on different browsers. On some, it works fine. On others (*cough* IE8 *cough*), we occasionally see a cut between images instead of a fade. Other times, the wrong image appears. Our images are set up absolutely positioned at the top left in a <div>; the first image is visible immediately; the rest are styled as visibility:hidden. What's the best algorithm for doing this using GSAP, given an arbitrary number of <img> tags (we're using jQuery, too)? We've tried a couple of ways, but the code for such a seemingly simple task gets complex quickly.
-
Hi If you've read this thread you know I've been trying to animate SVG masks. From what I gather, this is only possible by manipulating the SVG attributes directly, not with CSS transforms – which makes it easy for things like a circle's radius, but less so for rotation. Here's how I've attempted to do it (you can check the linked codepen): tl.staggerTo(el, 1, { cycle:{attr:function(){ var a = {cx:0, cy: 0}; a.cx = Math.cos((tl.progress() - 0.5) * 2 * Math.Pi) * 20; a.cy = Math.sin((tl.progress() - 0.5) * 2 * Math.Pi) * 20; return a; }}, ease: Linear.easeNone }) The goal is to change the cx and cy attributes over time so that the SVG element moves along a circle. There are two problems: using cycle and attr in conjunction doesn't seem to work? The function returns an object that should look like {cx:..., cy:...} but it's not interpreted correctly. I suspect I'm doing something really wrong here that has to do with not knowing javascript enough... here I'm trying to use tl.progress() to calculate cx and cy depending on the animation's progress, but this approach doesn't work; the progress is always 0 when accessed within the timeline itself I think, since the calculations are made prior to it running. How could I make it update properly? Using an onUpdate function, maybe? Cheers -
Hi, I was wondering if cycle could handle properties like delay or the overshoot value of a Back ease for example. Or to put it the other way, what are the properties cycle can animate?
