Jump to content
GreenSock

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

Search the Community

Showing results for tags 'timelines'.



More search options

  • 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

Found 15 results

  1. Hello! I am new to GSAP and I am having a bit of troubles with the following task: I am trying to animate some letters "hanging" , I want them to swing from one side to the other but in a quite natural looking way (like moved from the wind? possible?), and when the animation stops to go back to the initial position (center). What I have achieved is looking very bad (sorry, again I am new to this) Can someone maybe help me? Thanks in advance <3
  2. I'm building an SVG animation and I'm having trouble figuring out how I can incorporate a ScrollTrigger for my panels. My goal is to scale up the panels to their full size as far as the user is scrolled to a position that will allow them to view the animation. I'm not quite understanding how to do so in such a big timeline as this is the first time I'm creating something that is more than 10 lines of code with gsap. Any advice? I apologize in advance if my code is sloppy and not as efficient as it could be. Here's another codepen I made to try to test it out with less animations going on. https://codepen.io/Cptain/pen/wvMbQdO
  3. I'm trying to create a write on text animation that changes with each repeat of the timeline, but even though I have repeatRefresh set to true, (which should invalidate the tweens) it only repeats the same text over and over. I'm using a function in the "text" property of .vars that returns a random item from an array of strings. Am I missing something, and is it possible to achieve the effect I'm trying to with this method?
  4. Hi there! I have a question about how timelines are managed in GSAP 3. While a timeline's animation is running, in the js console I seem to be able to use: gsap.globalTimeline.restart(); If the animation has finished it ignores the restart completely. I can only get it to restart if call it while it's running. The project is a game, this is a particular scene, where I will need to restart the timeline and set a different player (between 1 and 4). Also as we're looking to use VUE.js as a single page application I expect will need a master timeline per scene. It's a bit complicated and a client/work related so I can't post it on codepen. If I can get this working and convince the team to use it then definitely interested in becoming a green sock member. There's nothing as powerful as GSAP for timeline management so definitely need to get this working. It's also worth mentioning during the script I can log the variables for the timelines I've created (tl) when the script runs, but not after it's finished running. Please ignore primarily what the animations are doing - as they're working well (it's a responsive scene of a player jumping over a bar then crying when they lose lol). It's mostly just being able to reset / rewind etc the main timeline and each other individual ones. As I can't seem to get either to work. $(document).ready(function () { var pCurrentPlayerNumber = 1; var currentplayer = ".player" + pCurrentPlayerNumber; var currentplayerwrapper = ".player" + pCurrentPlayerNumber + "-wrapper"; console.log(currentplayer); console.log(currentplayerwrapper); var tlSetStage = gsap.timeline(); tlSetStage.set(currentplayer, {className: "+=visible"}) .set(currentplayerwrapper, {className: "+=centercenter"}) .set(".currentplayername", {className: "+=p" + pCurrentPlayerNumber + "-bg"}) .set(currentplayerwrapper, {transform: "translateZ(200px)"}) .set(".highjump-set.fg", {transform: "translateZ(400px)"}) .set(".highjump-set", {className: "+=centercenter"}) .set(".highjump-set", {xPercent: 300}); var tl = gsap.timeline(); tl.set(currentplayerwrapper, {xPercent: -300, yPercent:-50}) .set(".highjump-set", {xPercent: 300}) .set(currentplayer, {className: "+=stancePlayerRunFast"}) .to(currentplayerwrapper, {xPercent: "+=200", yPercent:-50, duration: 1, delay:1}) .to(".highjump-set", {xPercent: "-=280", yPercent:-50, duration: 1, delay:0},1) .set(currentplayer, {className: "-=stancePlayerRunFast"}) .set(currentplayer, {className: "+=stancePlayerJump"}) .to(currentplayerwrapper, {xPercent: "+=50", rotationY:-180, yPercent:-50, duration: 0.5}) .to(".highjump-set", {xPercent: "-=10", yPercent:-50, duration: 1, delay:0},2) .set(currentplayer, {className: "+=aniPlayerPaused"}) .to(currentplayerwrapper, {xPercent: "+=10", rotationY:-180, yPercent: -80, rotationZ: 50, ease: "power4.Out", duration: 0.5}) .to(".highjump-set", {xPercent: "-=20", yPercent:-50, duration: 1, delay:0},3) .to(".highjump-pole-hoz", {xPercent: "+=70", yPercent:"+=330", duration: 0.5, delay:0},3) .to(".highjump-pole-hoz", {yPercent:"-=190", duration: 0.5, delay:0},3.5) .to(".highjump-pole-hoz", {xPercent: "+=20", yPercent:"+=220", duration: 0.5, delay:0},4) .to(currentplayerwrapper, {xPercent: "+=20", rotationY:-180, yPercent: -20, rotationZ: 100, ease: "power4.Out", duration: 0.5},4) .to(".highjump-set", {xPercent: "-=20", yPercent:-50, duration: 1, delay:0},4) .to(currentplayerwrapper, {xPercent: "+=20", rotationY:-180, duration: 2}) .set(currentplayer, {className: "-=stancePlayerJump"}) .to(currentplayerwrapper, {xPercent: "+=20", rotationY:-180, rotationZ: 0, duration: 0.5}) .set(currentplayer, {className: "-=aniPlayerPaused"}) .set(currentplayer, {className: "+=stancePlayerCry"}) .to(currentplayerwrapper, {rotationY:-180, rotationZ: 0, duration: 2}); console.log(tl); }); If I try to restart them using the below command I get a not defined error. Should I be doing each timeline as a function? tl.restart(); or tlSetStage.restart(); Ideally if I can at least just get the master timeline to reset at this stage it would be a win. Being able to reset individual timelines would also be great. Any help very much appreciated!
  5. Hi community! First of all i want to say that GSAP is awesome! Pleasuring to use it, don't know now how things will be done without it.. So the problem where i had stuck is next: First imagine page, with content, images, svg elements, and they are animated on start by css, let's say - "initial sliding animation". Then we have next: We have two visual blocks. On click the block expands => "Triangle button" become visible. => Content inside it changes and animates => Content under it becomes visible, and we can scroll the page. ("Triangle button" have fixed position) When clicking "Triangle button" we need to show another block, and doesn't matter at what point of page we currently are, block should slide in. Plus we need hover animation. So the questions: Is there a way to play timeline to some point on mouseenter and play back on mouseleave, and if we click on it it expands fully? Now i haven' t any idea how to implement opening of another side when we scrolled already at some point on page. Hope you may help. Thanks a lot!
  6. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. This video walks you through some common problems that professional animators face every day and shows you how GSAP’s TimelineLite tackles these challenges with ease. Although GSAP is very powerful and flexible, the API is beginner-friendly. In no time you will be creating TimelineLite animations that can bend and adapt to the needs of the most demanding clients and art directors. Watch the video and ask yourself, "Can my current animation toolset do this?" Enjoy. Video Highlights Tweens in a TimelineLite naturally play one-after-the-other (the default insertion point is at the end of the timeline). No need to specify or update the delay of each tween every time the slightest timing changes are made. Tweens in a TimelineLite don't need to play in direct sequence; you can overlap them or easily add gaps. Multiple tweens can all start at the same time or slightly staggered. Easily to rearrange the order in which tweens play. Jump to any point of the timeline to finesse a particular animation. No need to watch the whole animation each time. Add labels anywhere in the timeline to mark where other tweens should be added, or use them for navigation. Control the speed of the timeline with timeScale(). Full control over every aspect of playback: play, pause, reverse, resume, jump to any label or time, and much more. Unlike jQuery.animate() or other JS libraries that allow you to chain together multiple animations on a particular object, GSAP’s TimelineLite lets you sequence multiple tweens on multiple objects. It's a radically different and more practical approach that allows for precise synchronization and flexibility. If you are still considering CSS3 animations or transitions for robust animation after watching this video, please watch it again Check out this Pen! If you are wondering what "autoAlpha" refers to in the code above, its a convenience feature of CSSPlugin that intelligently handles "opacity" and "visibility" combined. Recommended reading: Main GSAP JS page Jump Start: GSAP JS Speed comparison Cage matches: CSS3 transitions vs GSAP | jQuery vs GSAP jQuery.animate() with GSAP: get the jquery.gsap.js plugin! 3D Transforms & More CSS3 Goodies Arrive in GSAP JS
  7. Hi! I'm fairly new to React and firsttimer with Greensock aminations. I'm developing a timeline that is animated on the z-axis when the user scrolls through the page. However I have some issues with getting React Transition Group to play well with nested timelines, and animating out of the current progress in the timeline and then animate back on track. I have the following issues: How would I use React Transition Group in components to add/remove elements when scrolled by the element in the timeline. As you can see in Box1 I tried to wrap the component in the Transition component, but then I cannot add a nested timeline to the main timeline in index.js, that is displayed as box2 with animate on scroll. When clicking a box it opens with an animation. how would I make it animate back to small again, when clicking/scrolling. Right now it just jumps back to where it were on the timeline, before it was clicked (try to click box2). I made a simple project. The real project is much larger, and I'm therefore really concerned about optimizing performance and reuse components etc. https://stackblitz.com/edit/react-jap66w?embed=1&file=index.js For reference, this site is doing some of what I'm trying to achieve visually: https://2018.craftedbygc.com/ Thanks in advance
  8. Hey! So I have a timeline loop that should loop infinitely, each new timeline has a negative offset to keep the loop from having a gap at the beginning of each timeline I can achieve the desired effect by adding the same timeline with negative delay multiple times ( lots of timeline.add(anim(), "-=3") ) But for some reason today I can't wrap my brain around how to do this nicely? I have tried various things, negative repeatDelay, onComplete set time() / progress(), but none of them quite work. Something like 2 timelines and the second one loops forever sounds like the right way to do it? Please look at the codepen and all should be made clear, on each 'repeat' of the master timeline there is a gap Thank you in advance ? I'm so sure it's something really simple that I'm overlooking!?!
  9. I am having problem to understand how to bind multiple animations into one variable which is in nest timelines. What I would like to achieve is a looping variables like this codepen: But with multiple animations for one/first variable (box1Timeline) like this, mentioned by @OSUblake Kindly assist, thank you!
  10. I'm new to GSAP but trying out TimelineMax and am having difficulty getting the onComplete function to work properly. Basically I want to trigger another timeline after one is finished playing. Here's the pen. Backstory: I encountered this issue with a more complex snippet inside ScrollMagic. So... wondering if I ran into a bug? Thanks for your help hive!
  11. Can 1 timeline, be added to multiple other timelines? I've added 1 timeline, to two different timelines, and only one instance of the added timeline is firing. If not, what is the best workaround for this scenario? Thank you, and thank you for such an amazing product.
  12. I find it easier sometimes to create two timelines rather then one for complex animations. I know I can make one timeline out of it, but my head is spinning as it is. Wondering if there is a performance hit of any sort using two timeline instead of one. I will have two object moving at once regardless. Thanks
  13. Hi team, this should be an easy one. I have two timelines the main timeline (mainTL) and a separate 'loop' timeline (overTL), which is paused, but not added to the main Timeline. I want to cue overTL to start at a specific point on the main timeline. But I can't find what the syntax is to do this – just to move ahead was forced to use the onComplete callback to play 'overTL'. var overTL = new TimelineMax({paused: true, repeat: -1}); var mainTL = new TimelineMax(); overTL .to('#element', 1, {property:value}) (etc...); // MY FUNCTION FOR PLAYING IT so I can use it from mainTL function playIt(timeline, offset){ timeline.play(offset); } mainTL .set('#neon', {scale: 0.1, transformOrigin: 'center center'}, 'startDust') // CUE overTL at this point .set({}, {onComplete: playIt, onCompleteParams:[overTL, 0]}, 'startDust') .to('#neonfade', 1, {opacity: 0},'startDust+=0.3') (mainTL continues ...); I created a function to do it, but just wondered if there is a more straightforward way to get this working in Greensock? There must be!! Kind of like what I used to do in flash where you would start a movieClip loop at a specific point in your main animation. I would like to be able to completely cue this timeline from the main timeline as needed – pause, reverse, seek etc. But obviosuly don't want to have to write a custom function for each of these if its already part of the plugin. Sorry I'm sure this must be obvious, thanks.
  14. Hi all, I've recently created a long animation by way of manually adding a whole bunch of individual tweens to one timeline along with delays so that everything lines up. I've since realized that nested timelines is the better way to this, especially since 98%of the animation I'm building is extremely sequential, though I should say that there are some places I'd like one timeline to overlap another, but I believe I can simply use an offset (instead of delays) on individual timelines that need a slight shift forward or back in the timeline. So i understand the concept here, but in my implementation I'm not getting sequential animation of the sequence. Instead I see everything run at once in sync. Here's a jsfiddle showing how I'm building the individual and main timelines. It may seem like there's a lot going on, but you can probably disregard most of the first few vars at the top of the fiddle (which are just param data and drawing methods), the timeline specific logic is at the bottom. I should state, that while there are two of the "banners" displayed there, which should animate sequentially, the elements of the banner should also be sequential. Looking at the structure of the json data (arrays split based on where they should live in a nested timeline) you'll see I want the first line (top left corner) to animate then the top box line and the bottom box line together then the text and the last line (bottom right corner) animate. Making a total of 3 timelines for each banner. Again, I know there may be a bit of code here but I've stripped this down as far as I can get without leaving all of the aspects in for everyone to understand what the goal is. Feel free to ask me for me questions for more clarity anywhere, etc.
  15. Hello, Thanks for porting GSAP to JS! I used it for years in AS and was really excited to start using the JS version. I've already deployed it to several projects with great results. I have run into my first road block, however, and I'm hoping someone may be able to assist. I've created a timeline animation that is controlled by a jQuery UI element (draggable). It works great in all browsers except, you guessed it, IE8. In IE8, the timeline will scrub forward with no problem, but will not scrub backwards in the timeline. I've confirmed that the value I am sending to progress() is properly decrementing, and I'm not sure what else I can do. My code is below: tl = new TimelineLite(); // Create a TimelineLite instance // Construct timeline from gallery items $gallery.find('img.nfu-gallery-item').each(function(){ if(!$(this).hasClass('first-item')){ // Do not include first item, fade in not needed tl.to($(this), 1, {opacity: 1, delay: 1}, '-=0.5'); } }); tl.progress(0.5); // Move timeline to 50% tl.pause(); // Pause timeline // Update timeline position var timelinePosition = function(handlePos){ percentLocation = (handlePos / sliderWidth); tl.progress(percentLocation); } // Create jQuery UI draggable element for slider $handle.draggable({axis: 'x', containment: $gallery.find('.nfu-gallery-slider'), create: function(){ $handle.css('left',sliderWidth / 2); // Create UI element at middle of slider }, drag: function(){ timelinePosition(parseInt($handle.css('left'))); // Update timeline position when UI element is dragged } }); Does anyone have any thoughts on why the timeline won't scrub backwards in IE8? Or, perhaps an alternative approach to take for IE8 that will achieve the same effect. Thanks in advance!
×