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

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've been trying to make this slider for the couple couple of days without much success. I have a slider and I'm trying to every time it finishes, it goes back to the first image, but it just stays in the same. Here is a snippet of my js. $(".right-arrow").click(function() { var contentSlides = $('.slider .slide'); var currentSlide = 0, tl = new TimelineMax(); tl.fromTo(contentSlides.eq(currentSlide), 0.4, {webkitClipPath: "inset(0 0 0 0)", x: 0}, {webkitClipPath: "inset(0 0 0 100%)", x: 10} ); if ( currentSlide < contentSlides.length ) { currentSlide++; } else if( currentSlide == (contentSlides.length -1) ) { currentSlide = 0; } tl.fromTo(contentSlides.eq(currentSlide), 0.4, {webkitClipPath: "inset(0 100% 0 0)", x: -40}, {webkitClipPath: "inset(0 0 0 0)", x: 0} ) }); Thanks in advance
  2. Hello, Is there a way to run onComplete function of all nested timelines after main timeline finished playing? I have a two areas at page - one is carousel list (left <- center/current -> right) and second is menu (div with buttons) which slide to left or right. I defined a drag event which unites two effects - carousel slide and menu slide. main timeline is controlled with .progress(X, true) function and after reaching 80% limit and dropping (mouseup), state changes and both effects need to be reset in their onComplete. The problem is that duration differs (first is 0.4, second is 0.6 - both start at the same time) and first effect doesn't fire onComplete after drop event plays main timeline - .play(null, false).
  3. GreenSock

    GSDevTools

    Your animation workflow is about to get a major boost. GSDevTools gives you a visual UI for interacting with and debugging GSAP animations, complete with advanced playback controls, keyboard shortcuts, global synchronization and more. Jump to specific scenes, set in/out points, play in slow motion to reveal intricate details, and even switch to a "minimal" mode on small screens. GSDevTools makes building and reviewing GSAP animations simply delightful. Get Started Load the JavaScript file //be sure to use a path that works in your dev environment <script src="./js/GSDevTools.min.js"></script> Instantiate GSDevTools GSDevTools.create(); That's it! The demo below shows GSDevTools running with its default settings. It automatically gives you control over every animation on the global timeline. Select an animation by id Any GSAP animation (tween or timeline) can be assigned an id (a string) which causes it to show up in the animation menu. That makes it easy to jump to any scene. Notice how the timeline and each tween below have an id assigned: //give the timeline and child tweens their own id. var tl = gsap.timeline({id: "timeline"}) tl.to(".orange", {duration: 1, x: 700, id: "orange"}) .to(".green", {duration: 2, x: 700, ease: "bounce", id: "green"}); //give this tween an id gsap.to(".grey", {duration: 1, x: 700, rotation: 360, delay: 3, id: "grey"}) //instantiate GSDevTools with default settings GSDevTools.create(); Now each id shows up in the animations menu (lower left). Persistence between refreshes For added convenience, when you manually set the in/out points, animation, timeScale, or looping state in the UI, they persist between refreshes! This means you can drag the in/out points to isolate a particular section and then tweak the code, hit refresh, and see the changes immediately within that cropped area. Any values set in the GSDevTools.create({...}) method will override manual selections. Set persist: false to disable persistence. If you encounter persistence contamination (e.g. setting timeScale in one affects another), simply assign a unique id to the GSDevTools instance (the recorded values are segregated by id, session, and domain). Configuration options GSDevTools can be configured extensively. Optionally define any of these properties in the config object: animation [string | animation] - If you define an animation, like animation: myTimeline, animation: myTween or animation: "id", that animation will be initially selected. By default, the global timeline is selected. container [string | element] - Specify the container element for GSDevTools, like: "#devTools" or document.getElementById ("devTools"). css [object | string] - The CSS you want on the outer div, like {width:"50%", bottom:"30px"} or a string of css like "width: 50%; bottom: 30px". It is safe to use GSAP-specific shortcuts like x, yPercent, etc. in the object syntax because it just gets passed to a gsap.set() internally. globalSync [boolean] - By default, animations are kept in context and synchronized with the root timeline (scrubbing one scrubs them all), but you can set globalSync: false to unhook it from the global timeline. Note: only one GSDevTools instance can be globally synchronized on a page (otherwise scrubbing them both to different times would break the time-space continuum). hideGlobalTimeline [boolean] - If true, the Global Timeline will be removed from the animation menu. id [string] - A unique string to identify the GSDevTools instance. The persistent values between refreshes are mapped to this id, so if you ever run into a case where there's cross-contamination of the persistent values (like if you embed multiple codepens on one page and don't want timeScale changes in one to affect the others on refresh), just make sure you give each one a unique id. inTime [number | string] - Position of the in marker (time, in seconds, or label or animation id). You can even use relative values like "myAnimation-=2" to start 2 seconds before the animation with the id of "myAnimation". If you use just a negative relative value like "-=5" , it will be measured from the end of the timeline, making it easy to just watch the final 5 seconds. keyboard [boolean] - If true (the default), keyboard shortcuts will work. Note: only one GSDevTools instance can listen for keyboard shortcuts. paused [boolean] - Initial paused state. loop [boolean] - Initial loop state. minimal [boolean] - If true, the UI will only show minimal controls (scrubber, play/pause, and timeScale). Note: when the screen is less than 600px it automatically switches to minimal mode anyway. outTime [time | label] - Position of the out marker (time, in seconds, or label, or animation id). You can even use relative values like "myAnimation+=2" to end 2 seconds after the animation with the id of "myAnimation" ends. If you use just a positive relative value like "+=5", it will be measured from wherever the inTime is. persist [boolean] - By default, GSDevTools remembers the in/out points, selected animation, timeScale, and looping state between refreshes in the same domain session, but you can disable that behavior by setting persist: false. timeScale [number] - Initial timeScale. visibility [string] - "auto" causes the controls to automatically hide when you roll off of them for about 1 second, and return when you move your mouse over the area again. Default is "visible", or you can set it to "hidden" to hide the controls initially (useful if you don't want the controls to obscure any part of the screen - you can still use the keyboard shortcuts to control playback or tap the "H" key to toggle visibility). Keyboard Controls SPACEBAR: Play/pause UP/DOWN ARROWS: Increase/decrease timeScale LEFT ARROW: Rewind RIGHT ARROW: Jump to end L: Toggle loop I: Set the in point to current position of playhead O: Set the out point to current position of playhead H: Hide/show toggle Tips and tricks Clicking the GreenSock logo (bottom right) gets you right to the GreenSock docs! Double-click on the in/out marker(s) to reset them both immediately. If the playback UI is obscuring part of your animation, just tap the "H" key to hide it (and again to bring it back) - you can still use all the keyboard shortcuts even when it's invisible. Advanced demos We purposefully chose very basic animations for the demos above, but here are a few that illustrate how easy GSDevTools makes it to control and debug even super-complex animation sequences. How do I get it? GSDevTools is available to Club GreenSock members ("Shockingly Green" and above). Just download GSAP with the bonus files zip from your Dashboard. Try GSDevTools for free on CodePen. To learn how to include GSDevTools into your project, see the GSAP install docs. FAQ Why is my global timeline 1000 seconds long? That means you've probably got an infinitely repeating animation somewhere. GSDevTools caps its duration at 1000 seconds. Scrubbing to Infinity is awkward. Does loading GSDevTools impact runtime performance? Since it must monitor and record the root timeline, yes, there is a slight performance hit but probably not noticeable. Keep in mind that usually you'll only load GSDevTools while you're developing/reviewing your animations and then remove it when you're ready to launch, so ultimately it shouldn't be much of a factor anyway. Why isn't GSDevTools in the CDN or GitHub repo? Because it's a membership benefit of Club GreenSock. It's a way for us to give back to those who support our ongoing development efforts. That's why we've been able to continue innovating for over a decade. See https://greensock.com/why-license for details about our philosophy. Does GSDevTools work with other animation libraries? Nope, it depends on some unique capabilities baked into the GSAP architecture. What will I do with all the time this tool saves me? Take up a new hobby, ponder deep philosophical questions, make cookies - it's up to you.
  4. Hi, I wondered why the only way I can trigger a quick reveal in Nested Timelines, is by using a duration longer than 0. As you can see in the CodePen example, the Blue, Green and Yellow circles should reveal themselves halfway through the Red circle's Timeline, but .set and a duration of 0 trigger initially, whereas the only way round it is to use 0.00001
  5. Codepen doesnt work btw dont know why.. Hey guys what i want to do: animate them out of the screen then animate them all 3 at once back. How do i do this? i commented out the .from because it will do that first and then the rest of the code. Why is this? Ty guys
  6. Hi everyone! I would like to create a quotes rotator with SplitText and Timeline Stagger which can be animated in lines or words or chars! I have already tried to create one and there is the Pen that I made below here but it is not really what I wanted to achieve!! I would very appreciate any kind of help. Thank you!
  7. 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...
  8. 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.
  9. 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!
  10. 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
  11. 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
  12. 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!
  13. 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!
  14. 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.
  15. 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
  16. 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?
  17. 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?
  18. 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
  19. 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.
  20. 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.
  21. 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
  22. 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!
  23. 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
  24. 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
  25. 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
×