Jump to content
GreenSock

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


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

  • FAQ

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

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

  1. 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!
  2. I'm new to greensock, and I realy like it sofar. Here is my problem. I have 2 div.product's and inside are 2 children, one needs to animate to the lef and one needs to animate to the right. I want this to happen for every .product div , but in sequence. Right now the animation starts with both the .left divs, and after that the .right divs start to animate. Is it possible to index the .product divs? and iterate over each one, no matter how many .products div there are? I would like to stagger them in sequence but I can't figure it out and I hope I'm explaining myself right...
  3. 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.
  4. 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
  5. 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
  6. 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!
  7. 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!
  8. 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.
  9. 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
  10. 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?
  11. HI there! I have some anchor elements that animate on hover ( image, overlay, two span texts ), all works fine, BUT, in the codepen you will notice that if you quick hover and out the elements the animation elements are not coordinated properly and the animation is not sequenced properly. Some time ago i used a solution that apply the timeline in "each" element and then the hover fires two functions, over and out, that plays and reverse the each animation, this method works perfect ( the animations remains consistent ) but i´m getting errors to implement it. This will be my definitive way to animate on hover elements independly Can anyone help me to find the solution? This is the code i have now "working": //box home is the container element $(".boxHome").hover(function(){ var imagen = $(this).find("img"); var overlay = $(this).find(".overlay"); var texto1 = $(this).find(".textoBox"); var texto2 = $(this).find(".textoBox2"); var tl = new TimelineLite(); tl.to(imagen, 2, { scale: 1.2, ease: Power4.easeOut}) .to(overlay, .4, { bottom: 0, ease:Power3.easeInOut},".3") .to(texto1, .4, { bottom: 65, autoAlpha: 1, ease:Power2.easeOut},".5") .to(texto2, .4, { bottom: 30, autoAlpha: 1, ease:Power2.easeOut},".7"); }, function(){ var imagen = $(this).find("img"); var overlay = $(this).find(".overlay"); var texto1 = $(this).find(".textoBox"); var texto2 = $(this).find(".textoBox2"); var tl = new TimelineLite(); tl.to(texto2, .4, {autoAlpha: 0, bottom: -60, ease:Power2.easeIn}) .to(texto1, .4, {autoAlpha: 0, bottom: -60, ease:Power2.easeInOut},".2") .to(overlay, .4, { bottom: "-100%", ease:Power3.easeInOut}, ".3") .to(imagen, .7, {scale: 1, ease:Power2.easeInOut},"0"); }); Thanks! Sebastián.
  12. 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?
  13. 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
  14. 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.
  15. I'm setting a delay as a negative number to simulate staggering. I'm wondering if there's a better way to achieve this with nested timelines.
  16. 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.
  17. 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
  18. 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!
  19. 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
  20. 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
  21. 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.
  22. 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?
  23. 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?
  24. 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.
  25. 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
×