Jump to content

Search the Community

Showing results for tags 'Tween'.

  • 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 If I have a staggerFrom tween that runs from left to right, is there anyway of having the stagger go from right to left on a series of elements? I don't want to reverse the timeline because the stagger is part of a wider / larger animation and when I use the .reverse() method it obviously reverse the timeline. I've given a simplified example below (Codepen example included). The red box comes in from the top and there is a stagger on the blue boxes that come up from the bottom (going from left to right). Is it possible to stagger the blue boxes so they still come up from the bottom, but stagger from right to left? Many thanks var tl = new TimelineMax({repeat: -1}); tl .from("#box", .8, {y:-60}) .staggerFrom(".box", .8, {y:60}, .15)
  2. Hi all, I am doing an interactive exhibit for my school's graduation showcase. In one of the exhibit, I implemented Tracking.js, which could detect colours using a webcam. The effect I want to apply is that, once the webcam detect a specific color, it will append the empty h1 and p tags conditionally (example: if detect Red, append h1 to Header A and p tag to Text A, if detect Blue, append h1 to Header B and p tag to Text B). I use jQuery's .text() function to edit the empty h1 and p tags once it detects a colour. However, the effect is quite abrupt. Is there anyway to use GSAP to animate it? P.S: In the CodePen, I did not put in Tracking.js as CodePen could not access the webcam. I used the .click function to show the .text() abrupt effect I was referring to.
  3. I have a "simple" question (I think that it doesn't need a codePen sample). We have a variable like this: var tx = "TweenMax.to('#element',2,{textShadow:'10px 10px 10px rgba(255, 255, 255, 0.5)'})"; I take it from an xml file. Can I do something like this? tml.add(tx, s); Where "tml" is a timeline and "s" the time in seconds. With this sintax it doesn't work (no error and nothing happens). Is there some other way to do this? Thank you very much for your patience. Mario
  4. Hello fellow tweeners! Hit a brick wall here even though I feel like I've done the hard part. I've been referring to documentation for hours trying to solve this. I'm trying to fire my page loading counter after it fades in, via the tween that does so. Everything is setup & neatly organised/labeled but I'm just butchering the last part lol. The three parts I'm using are marked with lots of asterisks & notes explaining what I'm trying to do. The load counter needs to be nested inside the "onComplete" callback which is already being fired by my tween (console log works)... just not able to get the countdown in. *sigh* Any help would be massively, massively appreciated. Loving the library & community equally! Cheers, Smallio Sorry for the newbie question <3
  5. How do I get an svg object to go to the position of another one? I have been banging my head against a wall. Trying to get pink to follow draggable green. Any help would be great
  6. I have this tween1 that should should work on click and then reverse in case I scroll back. My tween doesn't work, the click doesnt play and so the reverse doesnt work, so: -on click toggle active which will make the f active will have tween1.reverse() //CLICK EVENT ON SECTION 2, AND WHEN SCROLLING BACK TO SECTION 1 IT SHOULD REVERT ALL var tween1 = new TimelineMax(); tween1.to(".click-element", 0.3, {className: "+=active", x: 500, paused: true }, 0) .to('#section-2', 0.3,{className: "+=darkblue", paused: true }, 0) $(".click-element").on("click", function(e) { $(this).toggleClass('active'); tween1.play(); }); var scene1 = new ScrollMagic.Scene({ triggerElement: "#section-2", offset: 50 }) .on("leave", function() { tween1.reverse(); }) .setClassToggle("body", "darkblue") .addTo(controller);
  7. Basically, every time a tween is called in my timeline, I want to recheck the value to be tweened by. `generateValue` seems to be only called once. When I resize the window every time the tween is called it uses the value it first generated. Help would be very much appreciated! function generateValue() { var value; // if window is smaller than 520px if (Modernizr.mq('(max-width: 520px)')) { value = $window.width(); } else { value = 420; } return value; } TweenMax.to($myElement, .2, [x: generateValue});
  8. Hi, fellow GreenSock (forum) members. I'm stuck with animating an object over path, more like generally how to center say rectangle or any path to move smoothly on a path with autorotating. The Codepen pen is a part from what I would like to do but can't center the green "car" e.g. so that its center (midpoint X and Y or centroid if you wish) would move on the path. This year I have created complex animation of a cube moving along the "infinite" path with calculating shadows per rotation angle - with callback function - yet cannot do this simple animation well. Gray path is a rectangle, red one is nearly completed rounded rectangle with Bezier curves. The latter would be perfect but I cannot script the green rectangle to be centered on path at all times. So in general how to draw, position and/or offset an object so that it will move along the path by its center (centroid)? Having a group with invisible rectangle boundaries and then animating a group along the path? And yes, I have watched the excellent Note: I'm using svg.js for some easy creation of SVG elements. Intention is to script all to have rule base path creation and then animating objects over paths. Sure, the path rounded corners will be redone with arc commands :-).
  9. There seems to be a slight flicker once the animation is finished. This only seems to happen with HTML Videos. I was unable to reproduce the effect with other elements such as divs or imgs. Has anyone come across this issue before?
  10. Hi, I'm trying to make an element tween from off screen and land on a point while scaling down. I currently have the element scaling down and moving position but I don't want it to start scaling down until it gets closer to the red box. Any advice or guidance would be great.
  11. I wonder if there is a way to shake an object in place around its current position. I tried RoughEase and tweening from x,y to x,y with the same value. But the shaking will only be visible when they differ. Is there a simpler way than use an onUpdate callback? Thanks
  12. Hi all, been struggling with this for a long time now. Is there a way to tween a draggable, more specifically a type:"scrollLeft" element's position by clicking a button? Think of a draggable, scrolling left and right carousel - with a button. When the button is clicked the draggable element slides to the right 300px. I know there are methods to enable and disable the dragging, but I don't see a way to target the actual moving element. Even to manually go in and target the draggable item with a tween might work... but I can't seem to even find what moves! Thanks for any help you can offer!
  13. Hey, When animating an unknown number of elements like so: var timeline = new TimelineMax({repeat:-1}), items = document.querySelectorAll('.item'), startDuration = 20; for(var i = 0; i < items.length; i++) { var myDelay = (i * 0.5); animate(items[i], myDelay); } function animate(item, delay) { var a = TweenMax.to(item, startDuration, { rotationZ:'360', ease:Linear.easeNone, repeat:-1 }); timeline.add(a, delay); } What is the best way to modify the duration/speed of an individual tween? Thanks
  14. Hey, there! Is there a way to update the value inside tween when getting the animation reversed? For now I need some kind of fake preload animation, before modal window loads, so I'm using delay parameter with a variable value . But when I'm closing modal window (by clicking on a background layer), animation reversing but considering that delay. Is there a way to change that variable value on reverse?
  15. I'm trying to tween an element that has a relative height and it sits inside a container with relative height using absolute positioning. The desired tween animation is to move the element from the bottom of the container until it reaches the center. I'm also using scrollmagic as this animation should only appear during scroll to this container. I tried a few ways first way: default css of the element is already absolute positioned to center, container { position: relative; } element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } get the height of the element and its container. Minus off the element height from the container height. divide result by *two pass this height as a parameter in tween created window resize function and update the heights and also refresh the scenes scene is updated but tween is not. The culpit here is Tween not refreshing the variables on resize. Second way: default css of the element is at the bottom of the container with bottom: 0; position is still absolute used a to tween with top: "50%", yPercent: -50 this doesn't put the element in the center it's not centered and it only moves slightly The culpit here is using bottom: 0; and that breaks the absolute centering. Without bottom zero it works but the element comes in from outside of the container. Is there a workaround to this? Please help. Thanks!
  16. Hi ! I'm starting with TweenMax and got stucked with an issue. I have a menu which each links can start an animation but they can overlap and make the tween bug. I'd like each function to complete before being able to start another one. I've found that I should use onComplete but I don't get what I am suppose to do then. I've made a JSFiddle to demonstrate the issue I have. On .mouseover, the tween start but if I hover too fast on an other link, it bugs. :/
  17. Hi All, Im trying to get 2 tweens to animate at the same time when I mouse in over a link, and to reverse the animation when I mouse out. Each tween is working correctly in isolation, they're just not workingvery well together at the same time. The 2nd time you hover, the 2nd tween just jumps between its start and end points, there is no animation at all. I tried adding the position parameter of "0" to the second tweens but it didn't solve the problem Any help appreciated
  18. Hi Is there any way to make a timeline that is inside a function accessible outside of it? I have a short animation sequence used in different places on a site. I'd like to wrap the timeline in a function, but the problem is I'm also using scroll Magic. Thus the setTween method of scrollMagic needs you to pass the name of the tween in as a parameter. I tried using return with the timeline name (as return myAnimation) at the end of the function, but this didn't work. I've set up a simplified example codepen (link given above and minus the scrollMagic) to make it easier to illustrate any solution. I'm thinking there must be a way to make a timeline accessible outside of a function? Any help would be amazing. Emily.
  19. Hi I have gone through a lot of posts and found that tweento(getlabelafter()) will take me to the next label. But the issue is that it doesn't allow me to skip any tween and jump to the next label. Can you please have a look at the codepen n suggest a way to skip a tween so i do not have to wait for the tween to be over before going on to the next label
  20. lynette

    scroll text up

    Hi, Wondered if anyone can help? I have text and i would like it to scroll from bottom to top, going off the banner view and then leaving it on the last text for like 2.5 seconds. How would I do this?? <div class="banner"> <div id="copyScroll"> <p> Lorem Ipsum is simply dummy text? </p> <p> Lorem Ipsum is? </p> <p> Lorem Ipsum is simply dummy text of ? </p> <p> Lorem Ipsum is simply dummy ? </p> <p> Lorem Ipsum is simply dummy text of the printing? </p> </div> </div> <script> var tl = new TimelineLite(); function anim() { copyScroll = document.querySelector('.copyScroll'); p = document.querySelector('p'); tl .to(copyScroll, 1.5, {y: '-400px'}); } </script>
  21. New to GSAP, sorry if I'm missing something obvious, but I'm having a hard time understanding tween transformations. Please look at the codepen. I have three squares of dimension 10 at origin (10,10). Blue has been translated x+10 then scaled to half. Red has been scaled to half, then translated x+10. The black square I transformed using TweenMax.to() with x=10, scale=0.5 and it animates to a completely different location than the blue or red squares. I would expect it to either scale then transform, or vice versa. How would you explain GSAP g tweening in relation to basic SVG transformations?
  22. Hi, I'm using Angular UI-router to build a one-page site with a looping, draggable navigation, and want to use TimelineMax to animate a sprite on the transitions. What I've got so far (see Codepen link) is that when the user drags or swipes the target area, the animation plays or reverses (depending on swipe direction) and the new section loads. So far so good. However, I want the drag/swipe action to actually control the progress of the sprite, so that users can scrub through the timeline. Then, when they release the drag or swipe, the rest of the animation to play and the next page to load. Another thing I've noticed is that once I've swiped through all section of the page and looped back the beginning, the sprite no longer animates - the Timeline just jumps to the next sprite image. If you change direction it then starts working again. Any help greatly appreciated! NB: The individual page content won't load on the Codepen demo, not sure why, but it doesn't matter to the issue I'm trying to resolve here. Cheers.
  23. Hi, I have a side menu that is present on a page after page load. You can then slide the menu off the screen by either scrolling 1px or clicking the 'X' on the menu. When the menu has disappeared from a view a 'Menu' button shows and if you click on it, it brings the slide menu back in. Once again to complete the cycle you can get rid of this menu by either clicking the 'X' on the menu or scrolling 1px up or down. There's a bug in the code though which I found accidentally, which is purely of my making and i can't seem to get rid of it. Problem: When the menu has been closed and all you have is the 'Menu' button, if you click this button and accidentally scroll as the menu slides back in, the Tween that is fired by the 1px scroll hijacks the click Tween and it slides off again. Is there any built-in functionality in GSAP to prevent one timeline firing whilst another one is animating? (effectively making it null for the duration of the other animation). I've been going around in circles trying to solve it with setTimeOut(), but I don't think this is the correct way to approach it. The GSAP code is below and there is a pen to illustrate the problem here http://codepen.io/emilychews/pen/PpXaNV Any help / ideas would be awesome. Emily jQuery(document).ready(function($){ // global var for menu container var $menuContainer = $('.menu-container'); TweenMax.set($menuContainer, {x: '-100%'}); //set the menu off the screen before sliding in on page load TweenMax.set('.showMenu--button', {autoAlpha: 0}); // Button that appears after the Menu slides away // slides menu in on page load function bringInMenu(){ var menuIn = new TimelineMax(); menuIn .to($menuContainer, .9, {x: '0%', ease: Power1.easeOut}) .from($menuContainer, .5, {skewX: '2deg', transformOrigin: 'bottom right', ease: Power1.easeOut}, '-=.5') .to('.downarrow', 1, {y: -20, repeat: -1, yoyo: true, ease: Power1.easeOut}); // animated down arrow }; bringInMenu(); // Close menu with the 'X' on the menu itself $('.menu-x').on('click', function(){ var closeOnClick = new TimelineMax(); closeOnClick .to($menuContainer, 1, {x: '-98%', ease: Power1.easeIn}) .to($menuContainer, .3, {scaleY: 0, transformOrigin: 'top right', ease: Power1.easeIn}) .to('.showMenu--button', 1, {autoAlpha: 1}); }); // Close the menu on scroll var scrolled = false; $(window).scroll(function() { if ( !scrolled && $(document).scrollTop() > 1) { var closeOnScroll = new TimelineMax(); closeOnScroll .to($menuContainer, 1, {x: '-98%', ease: Power1.easeIn}) .to($menuContainer, .3, {scaleY: 0, transformOrigin: 'top right', ease: Power1.easeIn}) .to('.showMenu--button', 1, {autoAlpha: 1}); // reveals menu button scrolled = true; // update the scroll state } }); // ClICK FUNCTION TO BRING BACK MENU $('.showMenu--button').on('click', function() { var desktopMenuClick = new TimelineMax (); desktopMenuClick .to($menuContainer, .3, {scaleY: 1, transformOrigin: 'top right', ease: Power1.easeIn}) .to($menuContainer, 1, {x: '0%', ease: Power1.easeIn}) .to('.showMenu--button', 1.3, {autoAlpha: 0}, '-=1.3'); scrolled = false; // resets scroll state to false }); }); // end of jQuery
  24. Hello guys, GSAP newbie here, hope someone can tell me what I am doing wrong. When I define scaleX value in transform attribute of SVG <g> it doesn't seem to be recognised by GSAP. Only when I explicitly set scaleX (line 2 in JS) does the tween work as intended. Translate values seem to be recognised just fine. http://codepen.io/hrvojesimic/pen/XMybJe?editors=1010
  25. non-working example: now works! http://codepen.io/philipbell/pen/YZxewm It's snapping to it's new X value instead of tweening. Example of what I'm trying to achieve: http://codepen.io/philipbell/pen/XMaZEo The same equation works when used in a separate tween. I've used this same method in timelines, but for some reason it's not working for a 'to' tween. Why is animContainerR snapping to it's x value when passed through the modifyer plugin? Thanks!