Jump to content

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

Search the Community

Showing results for tags 'tweenmax'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hi all, I need to reverse my div's animation to its original state on the click of the link. I've been reading that TimelineMax is the only way to do this? Will they work together in this context/is there a way to do this with just TweenMax/am I stuck in the woods? The reverse() function in TweenMax doesn't seem to really do anything besides stopping the animation from working altogether. I've tried using TweenMax.to in a separate instance that selects my .link class for the addEventListener( 'click', animate); to return the div to its former properties but
  2. Hi all, So I am attempting to make it so my child grows into its parent. I have my wrapper div's margins set to 5vw so that I have a perfect border all around my browser. The issue seems to be when I click the div and the animation starts, it ignores the margins set there and expands past the wrapper's containment field. What am I not seeing? Thanks in advance!
  3. Hello Greensockers, Here's another gifani-inspired greensock animation The animations of the triangle are identical in the "use" copies. I tried to slightly modify the animation of the copies. But the code only partially works. (in the code after / * this -> * /) Attached gif animation shows what the result should look like. Is my approach a possible way? Or do I have to animate all triangles individually? Please leave your two cents
  4. Zuriel


    Can you tell me anything about FastDOM and if GSAP uses something similar or if you have ever heard of it, etc? I personally haven't heard anything about it until recently when someone recommended it to prevent some layout thrashing (something you see commonly with parallax animation where you are trying to move something based on scroll position, etc, etc). Whatever it is doing or whatever it does, it seems to boost performance. Do you know anything more about the techniques it uses and does GSAP do something similar? different? better? or are there some drawbacks to the process that Fas
  5. Hi, this is my first forum post and I'm hoping to get some help with an issue and learn more about GSAP. The project I'm working on is replicating a video game character select screen where the user can navigate through 3 characters (using the left and right arrow keys) which have idle animations until selected where an active animation will play on the selected character. I am doing this by using sprite sheets and SteppedEase in TweenMax. I have the navigation and idle and active animations on document ready working. The problem I am having is when switching to the nex
  6. Hi all, one mask - two rects - one timeline - the help of use that simple it can be
  7. I'd like to flip the object being animated right when it hits each point in the bezier animation. I'm aware of onUpdate but that fires every frame. Is there a way to know precisely when a bezier point is hit?
  8. Hey guys, my simple Tweenmax.set () is going on chrome and opera but not on edge IE11 FF56 have checked three different ways - alway the same result. can anyone point me the right direction ?
  9. Hi there, Im essentially trying to create some cool rotation effect animations. I have linked my codepen. I want the top box to roll back out another way when you click '.top'. Roll our to the right would be perfect. I'm also trying to reduce my code footprint.. any help as to how I could possibly use more variable or a loop etc would be greatly appreciated. Cheers
  10. I want to animate the home page of my website like this one : http://discoveroutpost.com/ I am using GSAP TweenMax function but unable to get the smooth animation like this. I am also trying the ScrollMagic Library for it but still no luck. Please guide how can I achieve this. Thanks in advance.
  11. I have this tween that repeats infinitely: var sparkleblink = TweenMax.staggerTo(".confetti", .5, {ease:Linear.easeNone, opacity:.2, repeat:-1}, .01); but I want to stop this animation after a certain point. I have a TimelineLite() which calls a function after the last animation: var tothebox = new TimelineLite(); tothebox.to(".scrollnotif", .1, {opacity:0}) // ** other animations here** // .to(".scrollnotif", .1, {opacity:1, onComplete:killthis}); Then I have that function that's being called onComplete: function killthis(
  12. I have a website in which I'm trying to load the TweenMax tag; https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js Everytime I try to do it, I get this: TweenMax.min.js:16 Uncaught TypeError: Cannot read property 'greensock' of undefined at Function.<anonymous> (TweenMax.min.js:16) at check (jquery.themepunch.tools.min.js?rev=4.6.0&ver=4.8.2:59) at new c (jquery.themepunch.tools.min.js?rev=4.6.0&ver=4.8.2:59) at t._gsDefine (jquery.themepunch.tools.min.js?rev=4.6.0&ver=4.8.2:59) at TweenMax.min.js:16 at TweenMax.min.js:16 But
  13. I'm getting an error when trying to use TweenMax in React component. I create the component like this below. import React, {Component} from 'react'; import {connect} from 'react-redux'; import Thumbnail from './thumbnail'; import TransitionGroup from 'react-transition-group/TransitionGroup' import {fetchHomeCollection} from '../../actions/client'; import styles from '../../../styles/client/home.scss'; class Home extends Component { constructor(props){ super(props); } componentWillMount(){ this.props.fetchHomeCollection();
  14. Hi So i have multiple dom elements that i animate along an svg path ... for now ... looping clockwise works ... it loops forever but if i call reverse() .... it acts like a rewind() ... if it repeated twice ... it will reverse only 2 times .. not forever var timeLine = new TimelineMax({ repeat: -1, paused: false, yoyo: true }); timeLine.add(TweenMax.to(arrPeople[i], totalTime, { bezier: { type: "cubic", autoRotate: true, values: points }, force3D: true,
  15. I'm trying to export a timelineMax animation as mp4 video using phantomjs. Everything works fine, but the animation speed is different on phantomjs. It's running too fast, 10-second animation completes in 2 seconds. If I timescale to 0.2, it works. Framerate is set to 24. Does anyone have an idea on what's happening? Thanks.
  16. I am getting a strange problem, i am animating a simple DIV along a Bezier path using scrollmagic. Everything is working fine, however when i reach the end of the animation, The pinned element which it is in, does a big jump. I have troubleshooted for hours and tied it down to the transition of when the animation is running it is using Translate3D property, then when it finishes, it quickly jumps to matrix property. It would appear that this switch in properties causes my page to jump. Is there anyway to stop the matrix property being applied, because the object stays where it is supposed to i
  17. Hi there, I am getting this error when I am opening this url in mobile and dragging bow to left." Error: <g> attribute transform: Expected number, "matrix(0,0,0,0,NaN,NaN)". Here is codepen url '
  18. Hi, As the title says, just before starting the tween the background colour flashes to white. Only on Firefox. I've tried to '.set' and also '.fromTo' to 'force' the starting colour of the background but no avail. Browser: Firefox 55.0.3 (64-bit) Os: OsX 10.11.6 Device: MacBook Pro (Retina, 13-inch, Early 2015) Thank you
  19. First off, to the creators and participants of this product and forum. Thank you. I've used GSAP for a bunch of small projects. My current project is pushing my current knowledge of the library and I'm learning some awesome techniques. Here's my problem: I've got a timeline that zooms through series of images. I have a loop that adds tweens to to the timeline so descriptive content related to the different sections of the timeline will fade in and out in time. Also, if you click the corresponding button, the timeline will scan ahead to that particular point. All of this
  20. Hi All, I've been using GSAP for 2 months now and It has saved me a LOT of time and headache. It is an awesome library. Recently I discovered that I can use Scroll Magic library with GSAP and I've been trying to make an animation using both of them. Here's the link to my codepen demo: The idea is that as we scroll down the page, the text "DESIGNWORX" should translate to the left and at the same time opacity should animate from 1 to 0. I've achieved that. The problem I'm facing is that I want to reverse this animation i.e the text "DESIGNWORX" should translate back
  21. Hey everybody! I've wanted to make this effect where I'm twinkling two stars, but as you can see in my embedded Codepen at the time of writing, I could only have them animate once at a time. I want to know if it's possible to have both of these objects animate in a manner which is a split second after each other, e.g. first star fades in and out and then the second star fades in and out, and repeat. Thanks.
  22. https://panike.pt/sustentabilidade/ Above website has really nice animation. If you see at the left side bullets. Those bullets gets filled with red when we scroll down and hover on them. They used top and translateY css property to achieve this but I am new to greensock and trying to create using greensock. Could you please help me. Thanks
  23. I have the following: var secOne = new ScrollMagic.Scene({ triggerElement: '.section-a', triggerHook: 0, duration: $(window).height() - 100 }) .setTween( new TimelineMax() .add( TweenMax.fromTo(['.section-a .svg-a'], 0.5, { autoAlpha: 0 }, { autoAlpha: 1, force3D: false, ease:Power4.easeNone }) ) .add( TweenMax.fromTo(['.section-a .text-a'], 0.5, { autoAlpha: 0 }, { autoAlpha: 1, ease:Power4.easeNone } ) ) ) .setPin('.section-a') .addTo(controller); Which is fine apart from the fact that the animations have to come in s
  24. Hey guys, So I have a centered element, when I create a scene for that element and go to another page (same window, scroll a little) and then coming back, the element is not centered anymore. It is moved a little to the left, even though my tween has only up and down movement. I tried to replicate on codepen, doesn't work. The original site: https://alacreme.000webhostapp.com/alczzz3/index.html On the first page you see "pasiunea gustului..." that goes down when you scroll. This p is centered. Now scroll down, where you see a facebook link, click it,
  25. Hi, Is it possible to animate a filled path so it effectively draws like the drawSVG plugin does for stroked paths? Will it be a case of having to learn how to animate SVG coordinates (if this is even possible?). I have seen a (somewhat complicated) method on StackOverflow on how to convert a filled path into a stroked path. Any tips / suggestions on further reading on how to create a 'draw' effect on filled paths would be wonderful (if it is possible to do). Thanks, Emily.