Jump to content

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

Search the Community

Showing results for tags 'timeline'.

  • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. Hey guys, i am new to greensock. i want to start the 3th .from after a delay of 2 second and continue the animation ( make it wiggle ) and repeat the animation. Basically i want to wiggle the animation after 2 seconds after the previous 2 .from are done. and another question: can you point me to some basic tutorials explaining labels,timelines and nested timelines. thank you guys in advance, best regards, Tim.
  2. Hey guys, I am new to all of this and trying really hard to create a banner where 3 lines of text stagger in ( from left to right ) then bounce and then slowly fade out. Would also love the option to repeat this every so many seconds. I have explored the repeat -1 option, but cannot find the option to repeat an action every so many second. Question: How can i fade out from where the animation last ended? Thank you guys in advance and Gsap is Awesome!
  3. Hi, Intro: I'm currently producing a sitebar banner, wich will animate depending on scroll position (percentage) of the website. So the Banner should trigger animation depending on this percentage or scroll position. So the idea was having a timeline fro, 0 to 1 (0 - 100%) Adding tweens there, and when the scroll position reaches theses position trigger these animations. i would like to add tweens to a timeline. But instead of adding them at a certain time, i would like to add them at a certain progress of the timline. var mytween = TweenMax.to(...) e.g. tl.add(mytween, 25%) Is this possible in any way? Thank you Best Carsten
  4. Hi All! I'm a newbie and i hope somebody can help me regarding a matter. Here below a short explanation. I'm trying to create a Preloading animation using Gsap. As you can see i have created a little SVG sample, then i have animated It using a timeline (nothing complicate and i hope i did it in the right way): At this point i want something that work in this way: A percentage progress linked with the Timeline. I have tried in many ways but nothing seems to work as i want. I know that the solution require a Javascript code but i don't know how to put Javascript and Gsap together. I hope I was clear, Thanks in advance. Dave
  5. 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!
  6. Hi there, love the GSAP library, but having a strange issue that I've never really had to address before. I wish to create elements dynamically on the page outside of the GSAP timeline, then within a created timeline, have the selector pick up whatever set of elements are currently matching the selector. The issue is the set appears to be 'cached' with repeat loops of the timeline. The codepen is similar to my code, but stripped down to just the basics of what's not working. In the last staggerTo, the elements are moved and then removed from the DOM. The onRepeat calls the same function to add new ones to the DOM, but repeat loops of the timeline don't evaluate the selector contents each time. As a side note, I was a little surprised that the onStart function didn't run before the rest of the constructed timeline, including the staggerTo's. I guess just a failure in how I comprehend the staggerTos are functioning, it's related to the same issue really, in that I need to be able to tell staggerTo, only evaluate the selector once you get to whichever part of the timeline. I did manage to get this working by using .add instead of the stagger, and inside there creating new timelines being passed the same selector and returning a set of tweens. These at least seem to be executed as the timeline 'reaches' them. Hope someone can provide some assistance or help me get my thinking straight about why this is expected behaviour and the correct method I should use to achieve what I'm after. Thanks!
  7. Hi, i have found a function that creates a random shake effect. The effect is now endless but i want to use this function in my timeline for a x amount of seconds. See codepen for the shake effect, below is kinda how i want it to work. function Tween(){ var T = TweenLite.to(".circle",0.02,{x:R(-10,10),y:R(-10,10),scale:R(1.1,0.9),rotation:R(-10,10),ease:Sine.easeInOut,onComplete:Tween}) }; function R(max,min){ return Math.random()*(max-min)+min }; var tl = new TimelineLite(); tl.add(Tween) .to('.circle', 1, {scale:50, y: -30}, "start+=0.5") .from('.circle-2', 0.3, {opacity: 0.0, scale:10}, "start+=0.6") .to('.circle-2', 0.6, {x:100, ease: Elastic.easeOut}, "start+=1.25") .from('.blokker', 0.6, {opacity: 0.0, x:15, ease: Elastic.easeOut}, "start+=1.4"); So this adds the shake effect to my .circle class but obviously this keep going and going. Just like the rest of my timeline i want this effect to last for a x time and then move on with playing the rest of the timeline.
  8. Guest

    ScrollMagic - TweenMax vs Timeline

    I'm new to both Greensock and ScrollMagic and I'm running up against a wall. I'm trying to understand how to tween/animate some aspects of my site ie., transitions between frames but still maintain some of the control by having items react when the user scrolls. Right now my project only reacts the scroll movement but I'd like to be able to trigger section to tween/animate as it gives a nicer/non choppy display. Any and all feedback/help would be greatly welcomed so that I can resolve this dilemma. Thank You
  9. Hello Peoples, I'm trying to create this Split-flap Display style animation using GSAP. I've got two images, each split into a grid and upon clicking, all the squares has to flip, revealing the other side. I'm trying to make a nested timeline and to stagger the whole thing. Here my code: //Splitting image into a grid var Split = function(tar) { this.$t = $(tar); this.gridX = 6; this.gridY = 4; this.w = this.$t.width(); this.h = this.$t.height(); this.img = $("img", this.$t).attr("src"); this.delay = 0.05; this.create = function() { $("div", this.$t).remove(); for (y = 0; y < this.gridY; y++) { for (x = 0; x < this.gridX; x++) { var width = this.w / this.gridX * 101 / this.w + "%", height = this.h / this.gridY * 101 / this.h + "%", top = this.h / this.gridY * y * 100 / this.h + "%", left = this.w / this.gridX * x * 100 / this.w + "%", bgPosX = -(this.w / this.gridX * x) + "px", bgPosY = -(this.h / this.gridY * y) + "px"; $("<div />") .css({ top: top, left: left, width: width, height: height, backgroundImage: "url(" + this.img + ")", backgroundPosition: bgPosX + " " + bgPosY, backgroundSize: this.w + "px", }) .addClass("segments") .appendTo(this.$t); } } }; this.create(); this.$t .on("click", function() { $(this).toggleClass("active"); }) .click(); }; $('.split').each(function() { var split = new Split(this); split.create(); }); //Flipping animation TweenMax.set(".segments",{transformPerspective:600}); $('.split').on('click',function() { var t1 = new TimelineMax(); t1.add([TweenMax.staggerTo($(".top").find(".segments"),1.0,{rotationY:"+=180",ease: Power2.easeIn},0.1), TweenMax.set(".top",{opacity:0}), TweenMax.set(".bottom",{opacity:1}), TweenMax.staggerTo($(".bottom").find(".segments"),1.0,{rotationY:"+=180",ease: Power2.easeOut},0.1)],0,"start",0 ); }) Can anyone help me on this?
  10. Hi All, I've created a fish eye scaling effect but it uses lots of individual tweens, it seems VERY redundant. I tried creating a timeline but it didn't work at all Would a timeline approach for this work, given I need the instance of the object being hovered?
  11. Hi there, im new to the GSAP and first of all i want to thank the devs for their great work! Sadly i seem to have a problem bringing together the CSSRulePlugin with a TimeLine-Object; actually i can guess the answer: these both are not supposed to work together, right? Thats what i have for example (for the principle i hope it is ok posting without codepen): var tl = new TimelineLite(); var blueStripePseudo = CSSRulePlugin.getRule('#cropContainer:after'), backWhitePseudo = CSSRulePlugin.getRule("#bckgrImgPartialContainer:after"); tl.from(blueStripePseudo, 1, {cssRule: {transform: "scaleY(5)"}}) from(backWhitePseudo, 2, { cssRule: { width: "100%", ease:Sine.easeInOut}}); If it is possible in general and im doing just something wrong i'd grateful if somebody could enlighten me otherwise i would appreciate if somebody could just confirm ^^ Thank you for your time! regards
  12. Just getting started with GSAP, and have been looking for a clear explanation of how long the time equates to when using in conjunction with scrollmagic. I have 5 images that do stuff, and it works well: .from(coaster, 6, {ease: Expo.easeOut,rotationX:90,transformOrigin:'0% 100%'}) .from(wheely, 5, {ease: Expo.easeOut,rotationX:90,transformOrigin:'0% 100%'}, '-=5') .from(dsgn_helter, 5, {ease: Expo.easeOut,rotationX:90,transformOrigin:'0% 100%'}, '-=5') .from(dsgn_trees, 5, {ease: Expo.easeOut,rotationX:90,transformOrigin:'0% 100%'}, '-=5') .from(dsgn_merrygoround, 5, {ease: Expo.easeOut,rotationX:90,transformOrigin:'0% 100%'}, '-=5') However if I change the first line to .from(coaster, 20, {ease: Expo.easeOut,rotationX:90,transformOrigin:'0% 100%'}) Or even a small value like 1, it makes no difference. I am assuming it's ignored if using SM with a duration? Many thanks in advance.
  13. Hey guys, I want to pause the timeline when it's completed. tl = new TimelineMax({repeat: -1, paused: true}); tl .to(dummy, 0.5, {x: '+=60', ease:Power3.easeOut}, 0.5) .addPause() .to(dummy, 0.5, {x: '-=60', ease:Power3.easeOut}, 1.5) .addPause(); The first addPause() works, the one at the end doesn't effect the timeline at all. The timeline is paused on load, a click on a button starts it. It pauses on the first addPause, a buttons starts it again but it doesn't pause on the last addPause. I hope it's somehow clear what I'm trying to achieve I'm thankful for any help.
  14. Hi, I am trying to create a banner with timeline animation and a background html5 video. I am trying to keep the video in sync with the timeline, which is also working pretty well in the codepen example. That being unless you switch to another tab or scroll down on a page so the banner is out of sight, then it seems the animation is pause while the video continues to play and therefore gets out of sync. So what is the best practice here? to always keep them in sync? Can I listen for when the timeline is in pause mode and then pause the video, or can the timeline pauses be deactivated?... or a 3rd option Perhaps someone has an example on this or maybe an earlier topic which I couldn't find?! Thanks! /Alex
  15. I am new to GSAP and am putting together a 2.5D rotating coin using GSAP scaleX and x. The coin is meant to a) "rotate" in the tails side, then rotate out the tails side, then c) rotate in the heads side, then d) rotate out the heads side, and then the loop of the sequence begins the rotate in of the tails side again. I have gotten the animation as far as c), but when I try to use scaleX to start d), something happens to the timeline and the "heads" side of the coin appears from the very start of the animation. I have included a codepen here: https://codepen.io/bamartelly/pen/RgayML If you un-comment lines 103 to 108 (pasted in below too) you can see the animation breaking when I try to start implementing step d). .fromTo(coin.heads, flipTime,{ scaleX:1, x:0 } , { scaleX:0, x:8 }, "headEnd") Here's the codepen with lines 103 to 108 uncommented, you can see how it all turns to custard: Any help greatly appreciated. Thanks!
  16. Hey Guys, Im quite new to GreenSock. Years ago a friend boasted about it when Flash was very popular, it was to defacto go-to library. So I'm trying to pick up a little bit as a hobby. I was wondering if anyone could assist me in understanding what I'm doing wrong here in my CodePen. I am simply trying to "Reverse" or "Yoyo" it back, so it keeps going back and forth. I tried several ways but I am certainly getting it wrong
  17. Hi, i do some basic mistake in my code, please look to my codepen. You will see in result title/subtitle than empty hole and at the end two closing links. But I wanted to have visible some form/marketing stuff which i call .js-main-boxies and hidden divs with classes .js-cta-form1 and .js-cta-form2. My timelines are paused by default, so question is why I see broken version and not correct one? pen is without CSS so problem can not be in that. When you remove timelines tlMeetingFormClose and tlOnlineFormClose it works, but of course closing functions not. Interesting is that when you click on "form 1 close", than click on "click 1" you will see posibility of clicking to "form 1 close", but it is not working. Any help or advice appreciated thx
  18. Hi there! I'm a total newbie but already enjoying playing around with Greensock. I'm working on an accordion menu, and this is the behavior I'm going for: 1. User clicks on a menu item. 2. Menu item's panel is revealed. 3. A sequence of three animations is triggered within that one panel. 4. User clicks to collapse menu item and the whole thing is reset. Right now, the fader animation I have on animEvent is triggered on window load and subsequent user clicks change nothing. I'm thinking I need to use TimelineLite to start the animation when the specific menu item is clicked. But I'm very new to this and would appreciate someone pointing me in the right direction. Thanks! Hilary
  19. Hi there! Thank you one more time for a such great library. On my codepen when I press "down" button square to starts move down. If you press the "reverse" button during this time, the following behavior is expected. First, the square returns to its initial position, and then starts moving to the right. So, I need to add a tween at the beginning of the timeline in such a way that to shift the following siblings. In my codepen I add tween at the beginning of the timeline but it has no influence for next siblings.
  20. In my Codepen example, there is a gold circle. When you click the gold circle, it moves around the page using `x` and `y`. If you click the circle while it's moving around, another timeline animation for the circle gets queued and runs after the initial one has finished. I want to prevent this behaviour. My instinct tells me to use lodash `throttle`, but I feel there should be a better way to do this, especially as I would need the duration of the animation to use a throttle. I want any click to the circle to have no effect if the animation is in progress. Is there a `TimelineMax` method I can use to achieve this?
  21. In my bounce codepen, I am using a `Timeline` to tween `y`. These durations are all different as the bounce distance changes, as the ball loses momentum. I am also tweening `x`, which is a single duration so that the ball travels. I want the `x` duration to be the same as the sum of all the `y` durations. Currently, if I add another bounce to my `y` sequence, it will throw off the `x` duration. Is there a nice way to do this so that my `x` duration just works without me having to manually tightly couple it to the sum of the `y` durations?
  22. Hello I have a list of items, using a stagger as it load on the page (going to use it with scroll) - this is fine. But then I am also trying to apply an animation when hovering over one item. I have it all in the CodePen. After trying a few things myself, I ended up looking at this example: For some reason, when I hover on one it still apply the animation on all list items. Not sure if I am selecting something wrong / missing something. Any ideas? Thanks in advance.
  23. I have a simple timeline that shows my headline then fades out. <div id="headline1">Dynamic text that may be 1 - 60 characters.</div> var tl = new TimelineMax(); tl.from("#headline1", 0.4, {autoAlpha:0}) //headline fade in .to("#headline1", 0.4, {autoAlpha:0}, "+=3.5"); //headline fade out Is it possible to make my headline visible depending on how many characters are in my headline? ie: 10 characters = 1 second before fading out 60 characters = 5 seconds before fading out
  24. i'm trying to use the window vertical scrollbar of the browser as slider of an istance of timelineMax. i'm also using the plugin scrollToPlugin. all seems working, with the not negligible detail that the timeline.progress is not the same of the scrolling percentage. Both, timeline progress and scrolling start from 0 and end to 1, but in all other points are differents. so, if i try to move the verical scrollbar (as timeline slider) and then i set the timeline.progress with the scrolling percentage, the scrollbar (and the page) move immediatily to another position, very different position. I prepared a simple page at this address www.attivitacollaterali.it/testArea/scrollTimeline.html (all the scripts are in the head - do no use the mouse wheel when scrolling) Maybe all the world knows "why" this strange behavior, excpet me. Thank you.
  25. Hi, First of all thank you for developing such an amazing lib and it has made our lives much simpler. We are developing a major website using greensock where all the animations are being handled by various timelines. it is a single page website so there is no page refresh. The top navigation helps navigating between timelines by tl.play(). These timelines also have a loop of flickering text set to repeat -1 The issue arrises when we load a new timeline and go back to the previous timeline. Then the loop starts running twice and the page crashes. I wish to kill all timelines on the document whenever a new timeline is loaded. Because there are like 20 chapters, it would be very very tedious to kill all animations on every click. I tried using TweenMax.killAll(); this abruptly kills all animations ( even if i have an animation playing ) and the next animation doesnt play. I tried using chap2.kill(); this works nicely but is not expandable. There are going to be 20 chapters which will make developer's life miserable. My code : chap1 = TimelineMax chap1.to(something) chap2 = TimelineMax chap2.to(something) // option 1 (not working) //click on chap1 in top nav TweenMax.killAll(); chap1.play(0); //click on chap2 in top nav TweenMax.killAll(); chap2.play(0); // option 2 (working but tedious) //click on chap1 in top nav chap2.kill(); chap1.play(0); //click on chap2 in top nav chap1.kill(); chap2.play(0); Can you please help me out over here. How to use killAll to enable a seamless display of animation. I was short on time so didnt make a codepen. If my query is not clear I will make a codepen n provide the details too. Thanks for your product. I hope it will keep on becoming better every day.