Jump to content
GreenSock

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

Search the Community

Showing results for tags 'cycle'.

  • 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

Found 13 results

  1. 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 kud
  2. 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
  3. Juraj

    gsap3 cycle method?

    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!
  4. 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;
  5. 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
  6. 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.
  7. Hello! Is there any way that I could manipulate the duration of each tween in a staggerTo() function? Thanks!
  8. 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
  9. 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
  10. 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
  11. 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 usin
  12. 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 i
  13. 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?
×