Jump to content
GreenSock

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

Search the Community

Showing results for tags 'group'.

  • 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 3 results

  1. I'm trying to create a function that would morph through a series of paths to reach destination. The codepen below tries to do that, but does not move. I did a function with just one intermediary (no group) and it works:
  2. Hey folks, I am using GSAP to get around the Firefox transform origin issues with SVGs and SVG child elements. I am applying animations to groups within an SVG. I have two SVGs, one that is for desktop sizes, and one for mobile. Each one calculates the 50% 50% transform origin on page load. However, on resize, when swapping to the alternate SVG for the different screen size, all the calculations are shifted and messed up for the one that was previously hidden. CodePen Demo Resize the window to see the issue. The SVG groups should be animating the same way. Is there a way to force GSAP to recalculate the transform origin on resize? This is the code I'm using: TweenMax.fromTo( elem, 0.75, { rotation: -10, transformOrigin: '50% 50%' }, { transformOrigin: '50% 50%', rotation: 20, ease: Sine.easeInOut, repeat: -1, yoyo: true } );
  3. Hi! This is what I'm trying to achieve: I want to tween a collection of 4 rectangles aligned vertically and transform them into circles. tl.to( $buttons, 0.5, { borderRadius: '50%'}, 'circle' ); // no problem Now I want to shift those circles to the right so that they're aligned diagonally while the circle transformation above is happening, hence the label 'circle'. Ideally, something like this: tl.to( forAllElementsIn( $buttons ), 0.5, { x: x+displacement, delay: 1, onComplete: function () { displacement+=25 }, 'circle' ); The delay would be because I want one circle to move right then circle2 then circle3 and then circle 4 to form a diagonal alignment. Is there a simple way to do this? I thought of just using a for-loop: for ( btn in $buttons ), but I don't know how the labeling will work out with tweens outside of that for loop. Thanks for the help!
×