Jump to content

Search the Community

Showing results for tags 'gsap'.

  • 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. Just started using GSAP and have built a grid using TimelineLite animations (see Codepen below). I'm keen for any comments on ways to improve as I'm pretty new to all this.
  2. Hi there. I'm interested in doing step animation but using the smallest engine you have to offer for GSAP, which is TimelineLite (correct?) I was wondering if there was an equivelent to something like this http://codepen.io/anon/pen/yNpQEq But with GSAP? Really need a light weight solution as most sites are not allowing more than 40k zipped HTML5 packaged files still and CSS3 older browser doesn't compare to Greensocks.. I did see this http://codepen.io/MAW/pen/MYdwRP But TweenMax is HUGE. Halp? Thanks.
  3. Forgot to clarify in title -- been using TweenMax Hi Guys If you take a look at my codepen, you can see there are multiple 'dashes' animating on the left side of the screen. I have been slowly stripping down this codepen ("GSAP Bezier: Cubic"). But these dashes are added as part of the bezier animation, and I'd like to add them without that... My goal is add multiple 'dashes' on page load, without delay. And add these at specific positions, without motion. Breaking down the task as I can understand it: Load the first SVG all objects are based on, as a variable Multiples of the SVG variable Add 10x more of that variable instantaneously Place these variables at specific x & y positions in the window Looping fade animation (currently applies to all not individual) Stretch goal! Add a nice fade in / fade out on all of it when you land / leave the page. 2.1 & 2.2 is where I feel stuck. Pointers in the right direction? I think one of my biggest issues is that I don't know the correct vocabulary to use while searching... Ultimately, I'd like to get the dashes spaced evenly on the x-axis, and randomly within a range on the y-axis, but animate a fade. That specific Math function is something I think I can work out later. Full disclosure -- I'm totally new to all of this (both GSAP and JS), so I'm in over my head a bit. But trying to get there by doing something challenging! Also apologies for the junk list of links at the end of the codepen JS section, it's the easiest place for me to stash links while I'm tinkering. Thanks!!
  4. Dear All, I am using the Avada theme + ScrollMagic, but I get this following error in the console in Firefox: ReferenceError: TweenMax is not defined In the theme's functions.php I am trying to enqueue the scripts and add/delete dependencies, but I still can't get it to work: wp_enqueue_script( 'jquery', false, array(), $theme_info->get( 'Version' ), true ); //LAURAN BEGIN//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //wp_deregister_script( 'TweenMaxMin' ); wp_register_script( 'TweenMaxMin', $template_directory . '/assets/js/1lauran/TweenMax.min.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'TweenMaxMin' ); //wp_deregister_script( 'ScrollMagic' ); wp_register_script( 'ScrollMagic', $template_directory . '/assets/js/1lauran/ScrollMagic.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'ScrollMagic' ); //wp_deregister_script( 'animationGsap' ); wp_register_script( 'animationGsap', $template_directory . '/assets/js/1lauran/plugins/animation.gsap.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'animationGsap' ); //wp_deregister_script( 'debugAddIndicators' ); wp_register_script( 'debugAddIndicators', $template_directory . '/assets/js/1lauran/plugins/debug.addIndicators.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'debugAddIndicators' ); //wp_deregister_script( 'lauranScrollMagic' ); wp_register_script( 'lauranScrollMagic', $template_directory . '/assets/js/1lauran/lauranScrollMagic1.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'lauranScrollMagic' ); //LAURAN EINDE///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// And this is my script: //jQuery(document).ready(function($){ jQuery(document).ready(function(){ // place custom JS here console.log("DOM ready"); // window, links, and other assets loaded jQuery(window).on("load", function(){ // or place custom JS here to make sure DOM is ready and the window is loaded console.log("window, links, and other assets loaded"); var images = [ "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_01.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_02.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_03.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_04.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_05.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_06.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_07.png" ]; // TweenMax can tween any property of any object. We use this object to cycle through the array var obj = {curImg: 0}; // init controller // create tween var tween = TweenMax.to(obj, 0.5, { curImg: images.length - 1, // animate propery curImg to number of images roundProps: "curImg", // only integers so it can be used as an array index repeat: 3, // repeat 3 times immediateRender: true, // load first image automatically ease: Linear.easeNone, // show every image the same ammount of time onUpdate: function () { $("#myimg").attr("src", images[obj.curImg]); // set the image source } } ); var controller = new ScrollMagic.Controller({loglevel: 3}); // build scene var scene1 = new ScrollMagic.Scene({triggerElement: "#imagesequence", duration: 220}) .setTween(tween) .addIndicators() // add indicators (requires plugin) .addTo(controller); var scene2 = new ScrollMagic.Scene({triggerElement: ".box2"}) .setTween("#animate1", 0.5, {backgroundColor: "green", scale: 2.0}) // trigger a TweenMax.to tween .addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin) .addTo(controller); var scene3 = new ScrollMagic.Scene({triggerElement: '#containerLauran',duration: 300}) .setPin('#blockLauran') .addIndicators() .addTo(controller); var scene4 = new ScrollMagic.Scene({triggerElement: '#containerLauran2',duration: 200}) .setPin('#blockLauran2') .addIndicators() .addTo(controller); }); }); All scripts seem to have been added/enqueued correctly if I check the html structure with the Firefox inspector. All scripts are added in the right order as enqueued in the functions.php file of the WP-theme. Can someone help me out? It looks like if I am almost there... Thanks! Lauran
  5. Hey, guys. I'm having some trouble moving my CSS3 animations to GSAP. I'm new to this animation library so bear with me. I have several elements starting off-screen and dropping downwards into their final resting places. Each element has its own unique CSS transform string, containing some or all of the following: perspective, rotateX/Y/Z, and skewX/Y. My first attempt was to use from() and have GSAP do all of the heavy lifting interpolating from a base state I defined in a JSON object to the state defined in my CSS transform strings. Unfortunately, I couldn't get any 3D transforms to occur; only the vertical translation. In other words, the elements would move but would look out of place since their final state had no rotation or skewing present. I posted a question on SO and Jack recommended I move away from these transform strings entirely and use GSAP native animation properties. (He also pointed me to these forums.) So, I switched from, ah, from() and moved to, uh, fromTo(). I explicitly defined the initial and final states in JSON objects and handed them off to fromTo() for animation. I used my original CSS transform string values (i.e. transform: perspective(400px) rotateX(39deg) etc etc) in my GSAP state objects (i.e. 'transformPerspective': 400, 'rotation': 0, 'rotationX': 39). Unfortunately, the end result is fairly different from the pure CSS transform version. I came up with two fiddles to demonstrate the difference: Pure CSS: http://jsfiddle.net/nLohzgzb/4/ Pure GSAP: http://jsfiddle.net/fuoch37v/ Note that the animation itself is different (no "blowing in the wind"-type effect) and the end results aren't identical either. I'm sure I'm just doing something wrong or missing something obvious. Could someone point me in the right direction? Thanks.
  6. Hello guys, I'm new here, and i'm trying to make this SVG rotate forever, but it just won't work, i've tried making the time -1 and it still wont work. any suggestions? Thanks. <script> //we'll use a window.onload for simplicity, but typically it is best to use either jQuery's $(document).ready() or $(window).load() or cross-browser event listeners so that you're not limited to one. window.onload = function(){ var logo = document.getElementById("logo"); var tween =TweenLite.to(logo, 5, {rotation:360, transformOrigin:"50% 50%"}); //keywords tween.restart(); } </script>
  7. Hello in the given pen i want to achieve : 1) Only the elements inside the circle area to be visible with ease effect of gsap.i.e on increasing the radius they must appear onto screen via gsap and on decreasing similarly should disappear 2) the elements to appear or disappear should be draggable with the container as the max limit of circle. 3) the elements should be clickable. 4) the circle opacity should be reversed i.e right now it is rgba(0,0,0,0.8) inside the circle i want it to be outside the circle so as to give the selection effect waiting for help. Thank you
  8. Hi GSAP authors! I'm need help, i maked tweening engine, Animo.js (github.com/dalisoft/animo.js - 2 branch (v2 and master v1). I Highly optimized the performance, but i dont know why i can't tween smooth than GSAP. I have question, why TweenMax size too large??
  9. Hi guys, today i was trying to reproduce a kind of fountain effect made of div with the following concept: Create a javascript array Push a div into the array Initialize its position with css wherever you want Move the dive like a water spurt Repeat with setInterval Well as you can see it's quietly easy, not that complicated but i was wondering how can i realize the fountain effect? well i mean, which kind of function do i have to use to give my animation this effect? Here's an example of what i'm trying to reproduce. http://cssdeck.com/labs/html5-canvas-fountain-exploding-particles-with-gravity Note: the previous example is realized using a canvas, i'd like to reproduce it without canvas, only using divs, jquery and the TweenLite library. TL DR: Which is the function i should use to reproduce something like that: http://cssdeck.com/labs/html5-canvas-fountain-exploding-particles-with-gravity using the TweenLite library?
  10. Hi guys, today morning i was reading the "get started page" on the GSAP web site, i was finding it really interesting, then i decided to try it. But as soon as i wrote my code and launched on google chrome, it didn't seem to work at all. Then i started wondering if there were some problems with my browser even because i tried the same code on CODEPEN (http://codepen.io/RyanLeenox/pen/EjWNRg) and it's working perfectly. So my question is, what to i have to do, to run the code on my browser? ps. I'm new here, this is my first post and i really hope this is the right section, these are the right topic tags, if not i'm really sorry about it.
  11. hello, thanks for this awesome GSAP i have one question, a simple code as below var tl = new TimelineLite(); TweenMax.set($a, {autoAlpha: 0, display: 'none', top: 100}); tl.staggerTo($a, 1, {autoAlpha: 1, top: 0, display: ''}, 0.2); tl.play(); staggerFrom seem better for my code but i cant get it work, i will try again late so now i set the $a property by TweenMax first. if i set the property by css file not by TweenMax, and then play with TimelineLite, will i get the nice performance from gsap too? e.g set translate, opacity, z-index, scale etc any different between set property from css / TweenMax? which one is better? sorry for my language skill, thanks so much
  12. Hello I want to create a animation in which following events occurs 1) A custom horizontal scrollbar on the bottom of the page,this bar ro remain constant and do not move 2) A horizontal navigatable website( using magicscroll.js) 3) All the animation is related to horzontal scroll movement of the custom horizontal bar Animation required 1) As soon as i move the below horizontal bar the #cover div should reduce the opacity for the radius and the div behind it should be visible. How is this animation achievable using GSAP. Please help I am a newbie to GSAP
  13. A warm hello to all of the community! (Apologies if the preamble's a little boring, you can always just skip to the heading below where I'll start cutting the mustard.) I'm Alex, and I started using GSAP a few months ago, after immediately falling in love with its robustness and sheer performance. It was at that very time I started my new job, and it was time to start using GSAP in all of my front-end projects I decided. So, I posted about one or two things here on the forums, and was further overwhelmed by the quality of support provided from GSAP's developers, and other members of the community. The weekend before I started that job, I spent the whole time beginning to write a little library that'd allow me to easily make calls to GSAP with some pre-determined transitions I find myself using a lot in my projects. It was largely an exercise in using GSAP and I thought it could be helpful to me in future. As I went along, using it in development, I encountered bugs and realised that I needed to add many features and improve a lot of aspects of it for it to "just work". So, I kind of flew by the seat of my pants with it and bolted in new things or fixes and continued to use it in development. Since then I've been using it in 'live' releases (i.e. other people have been using the projects but thus far they're internal), and I haven't encountered any major issues. Though there is a lot of work and improvement I know I would do if I had the time. Anyway, it has ultimately saved me loads of time and been a pleasure to use, since I can quickly adapt the transitions I'm using, I don't need to repeat large chunks of code spuriously through my different projects, and it's designed to be very easily intelligible to people who haven't even used it before (or GSAP.) To quote Jack, "But in fairness to Julian, he really wasn't trying to build a tool that's as robust as GSAP - Velocity is more for simple UI animations in the DOM.", the thing I like to be able to do is harness GSAP's power and flexibility where necessary, but also make simple UI animations in my projects. Since GSAP is clearly the most performant/cross-browser animation suite available for the web, those benefits are important even in the websites I make, where I can often be using things like Skrollr.js too, and require backwards compatibility to the older, often nasty versions of IE. So that's the purpose of QUI really, and I hope other people find it useful Without further ado I've made it available as a project on GitHub, it can also be installed via Bower and it uses GSAP as a dependency, so if you have those tools installed and are a little familiar with the command line it can be added to your project in no time. I'd love it if people made pull requests and possibly even helped motivate me to think more about this project. I would say at the moment it's still very usable for most purposes, but I know that some of the transitions haven't been updated since I better learned how to implement them. I haven't yet written documents for the project, though I am planning to this afternoon. I'm going away tomorrow and I need to pack etcetera but I think I'll have time anyway. That'll probably make a big difference, so I'll post about that when I have done. Seriously, there are tonnes of things I know I could do to improve this, but I figured if other people had a tinker it'd happen a lot faster. The main thing for now I suppose is it works and seems to add very little overhead to my projects, both in terms of loading times and execution. GitHub page: https://github.com/Quasso/qui GitHub site (it's a small demo): http://quasso.github.io/qui/ Install via bower: bower install qui (--save-dev) Really looking forward to hearing any feedback anyone may have. Docs soon!
  14. I had a need for controlling a sprite-sheet, with pause, play, and go-to-frame functionality. Also needed practice creating jQuery plugins. The result is jquery.gsap.sprite.js. Gitub: https://github.com/agrothe/jquery.gsap.sprite Demo: http://jsbin.com/quvuzo/6/edit?html,js,output Sample Usage: var mark = $(".mark").sprite({ frameWidth: 24, frameHeight: 70, sheetWidth: 120, imageSrc:"https://dl.dropboxusercontent.com/u/6801572/marksprite.png" }); // Pause the sprite mark.sprite("pause"); // Play the sprite mark.sprite("play"); // Resume the sprite from where it was paused mark.sprite("resume"); // Restart the sprite from the beginning mark.sprite("restart"); // Stop the sprite mark.sprite("stop"); // Goto first frame (0 indexed) and stop mark.sprite("seek", 0, true); // Goto thrid frame (0 indexed) and stop mark.sprite("seek", 2, true); // Goto thrid frame (0 indexed) and continue mark.sprite("seek", 2); A few advanced features are overrides for TweenMax and TimelineMax libraries, as well as passing in your own Timeline object for maximum control. Comments and suggestions more than welcome.
  15. Not sure if this should be Flash or JS, but its a crossover project. I've recently been working on a big campaign, that uses a large amount of character animations, and our team was using a mixture of Flash and After Effects to achieve these great animations. Then came the mobile placements, and I found that the actual delivery platform itself had no support for canvas or easelJS and barely any SVG support. So I ended up creating spritesheet animations using CSS and manually setting up frame by frame animations in Illustrator, the problem was now that these animations didn't match what the rest of the team was doing in Flash. So I looked into exporting the spritesheet from Flash itself so it would capture frame-by-frame movements, but the issue was Flash Spritesheets place the character in an X and Y fashion, rather than all being on 1 line. I played around with a Codepen to make it work and used the onUpdate ticker to make it work with an array of all the possible background positions. Then I thought, why not make this an export option straight out of Flash? Its a little work-in-progress, but I hope this gives an idea of what I wanted to achieve. It just exports out a HTML page that uses GSAP to animate the background position from an array dataset. https://gist.github.com/joemidi/87168087b5c0eae36e86#file-gsap-spritesheet-plugin-jsfl
  16. I have been working on a 2d/3d transition effect module, and I have been running into some issues integrating with gsap (TweenLite). Most of the Tweens require updating on every $("window").resize() function if they have any media queries. Unfortunately I have been running into issues overwriting TweenLite.to's that involve rotations. A good example of this is a simple "hamburger" icon animation. In the below codepen is a decent example of the issue. If you resize the window while the button is in the X state (or navState = 1) the rotation tween acts as though its stuck in the tween.progress=0 state; http://codepen.io/anon/pen/MwYmVW By changing rotationZ: to rotation: the tween rotation get stuck in the tween.progress=1 state. http://codepen.io/anon/pen/MwYmxa If anyone can shed some light on this issue it would be much appreciated. Thanks, Daniel
  17. Hi everyone, first of all, this is my first day using gsap and I am like a child ! Awesome plugin. Aaand I just Edit it because it was a really stupid question when you search a little more. I am very sorry. At least this is my first post in this forum.
  18. mikecorbridge


    This question has probably been asked, but my searches have not turned up anything of value yet. Basically I have an animation sequence that will be used on multiple timelines. Is there a way to 'package' a unique timeline and apply it to others? An example I might come up with is the flapping of a birds wings (I'm not writing that btw). The sequence I might use to flap the wings could be generally applied to a number of wing images, and bird bodies. Apologies in advance if this noob question has already been addressed.
  19. Hi, I'm working on a new interface using SVG, GSAP and JQuery. I'd like a fluid interface with smooth interactions, and without staggered effects as you can see on this codepen (when the mouse move too fast between the plygons). I'd like something like this (each area back to its place before activating the new MouseEvent) but without the memory effect wich append a new Timeline each time the mouse is over a new area. I tried a lot of things like tl : new Timeline ({onStart:removeMouseEvent, onComlpete:addMouseEvent}) but the result is never what i want exactly. Is there a way to do that ? I hope I was clear enough, my english is pretty approximate. Thanks for reading and thanks for your amazing API.
  20. GreenSock

    GSAP 1.16.x Update

    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. We're constantly improving GSAP to solve the problems you face as a developer/designer. In the recent release of GSAP 1.16.0 and 1.16.1, Draggable got some big upgrades and SVG support has never been better across the whole platform. Here's a summary of what's most exciting in 1.16.x: Draggable gets "autoScroll" What happens if you're dragging an element inside a scrollable container (or page) and you reach the edge? Wouldn't it be nice if it automatically scrolled in that direction for you? Wouldn't it be even cooler if it applied variable-speed scrolling based on how close your mouse/touch is to the edge, and it handle MULTIPLE containers? Wish granted. Video tour Interactive demo See the Pen Draggable autoScroll by GreenSock (@GreenSock) on CodePen. Draggable's new getDirection() method Sometimes it's useful to know which direction an element is dragged (left | right | up | down | left-up | left-down | right-up | right-down), or maybe you'd like to know which direction it is compared to another element. That's precisely what getDirection() is for. Video tour Interactive demo See the Pen Draggable getDirection() by GreenSock (@GreenSock) on CodePen. Easier SVG animation with svgOrigin For SVG elements, CSSPlugin recognizes a new svgOrigin special property that works exactly like transformOrigin but it uses the SVG's global coordinate space instead of the element's local coordinate space. This can be very useful if, for example, you want to make a bunch of SVG elements rotate around a common point. So you can do TweenLite.to(svgElement, 1, {rotation:270, svgOrigin:"250 100"}) if you'd like to rotate svgElement as though its origin is at x:250, y:100 in the SVG canvas's global coordinates. It also records the value in a data-svg-origin attribute so that it can be parsed back in. So for SVG elements, you can choose whichever one fits your project better: transformOrigin or svgOrigin. Sara Soueidan used this feature in her excellent Circulus tool demo. Interactive demo See the Pen GSAP svgOrigin by GreenSock (@GreenSock) on CodePen. For more information about how GSAP has solved cross-browser SVG challenges, see https://css-tricks.com/svg-animation-on-css-transforms/ and for performance data, see https://css-tricks.com/weighing-svg-animation-techniques-benchmarks/. More Draggable improvements Draggable exposes a lockedAxis property so that you can find out whether it's "x" or "y" (assuming you set lockAxis:true in the config object). New onLockAxis callback that fires whenever the axis gets locked. Several performance optimizations were made to Draggable, particularly for transforms and scrolling. Draggable allows you to native touch-scroll in the opposite direction as Draggables that are limited to one axis. For example, a Draggable of type:"x" or "left" permit native touch-scrolling in the vertical direction, and type:"y" or "top" permit native horizontal touch-scrolling. SVG support is better than ever. It plots the rotational origin accurately, for example. Touch support has been improved as well. Bug fixes See the github changelogs for 1.16.0 and 1.16.1 for a complete list. Conclusion If you're already using GSAP and/or Draggable, we definitely recommend grabbing the latest version. If you haven't tried GSAP yet, what are you waiting for? Head over to the Getting Started article/video now and you'll be having fun in no time. Helpful links Getting Started with GSAP Draggable demo and main page Draggable docs GSAP docs Got questions? Visit the forums
  21. Hey, i cant seem to find a way or an example of how to replay an animation like this one, any help would be highly appreciated Heres a link to codepen of the animation i want to restart on hover: http://codepen.io/acronamy/pen/QwmdBL
  22. Hey guys, first of all i wanna say thanky you very much @ the GS Team, for this awesome libary. Im pretty new to Javascript and programming overall, did watch some Javascript Tutorial and did read a litle bit about it. Did only work with HTML and CSS before (animationwise only with transitions). Basicly im trying to learn Javascript to code a Slotmachine, a pretty complex one (which has a working php script and did work in flash before), but unfortunatly flash isnt the best for mobile devices, so i guess going with Javascript is the way to go. As i said im new to Javascript, i did code a basic Slot this night. Which does not more then spinning the reels on a button click with random symbols appearing, i did not try to connect it with php yet (ill do this after it works as it should). My Slot got 5 Reels with 3 Symbols each reel (at all it got 6 Symbols for the animation per reel, as im resetting the position for the reelanimation after the 3 symbols are out of the viewfield of the reel.) So, i got this working with a semifluid animation, but my problem is the animation lags (probably cause alot of things are done at the same time) at all im moving 30 125x125px divs at the same time + changing the symbols. My code for this is about 400lines long, (could be much shorter if i optimize it). Im wondering if there is a posibility to do such a complex animation without lags just with JS and GSAP, or is it in this case nessecary to go with Canvas? If you think that it is possible to get a smooth working slot, which solution would you use? regards houseshow Gonna give it another try, with another idea which i had and will post a codepen link, after im done. Maybe you can give me some hints afterwards.
  23. [sEE CODEPEN] I'm trying to make an easy way to implement multiple views on a single webpage using HTML5 GSAP animation. So I declare an object constructor "pageElement." Inside I have a method that triggers an animation based on object properties declared earlier in the constructor given if I want the object on or off screen. The code throws an error [sEE ATTACHMENT.] Essentially what the error tells me, is that within the GSAP declaration, it does not accept methods within methods (method-ception). I hope there's some error in my code... This would be awesome. Anyway, thanks for taking a look, and have an awesome day Jacob Alford @jacob_alford
  24. After a lot of back & forth regarding animation on a current project, I whipped up an export script to translate After Effects CC compositions into TweenMax/TimelineMax documents. I'll be adding more documentation & examples, but if you'd like to give it a try, you can find the script at: https://github.com/Meandmybadself/AfterMax
  25. Hi, I am newbie to GSAP, I've read the documentaion http://greensock.com/docs/#/HTML5/GSAP/TweenLite/ Here I see the play, pause reverse all the stuffs for tweenlite. So. I am trying to add multiple elements, like doing it in timelinelite. You can check the code pen url(used tweenlite JS not timline). Play, pause, reverse those stuffs work only for the single object tweens, or we can add multiple tweens in the tweenlite. When I try to add another tweens, animation is working but in console is throwing an error says that undefined is a function and duration info is not printing. So, kindly help me, whether am doing the right thing or not.