Search the Community

I'm desingin the web site that it's structure is like scrollmagic. what do i have to do to make the tweenmax animation codes play when it arrives at anchor(#sample)?

Hey I'm currently working on a touchscreen which let's say for simplicity sake, just has a fullscreen bitmap image, the image is of a book and I wan't to be able to zoom into certain parts of this old book. Around this bitmap of the book, I've placed invisible DIV's to click on, when clicked, I would like the entire bitmap, to center the invisible box, by scaling up the entire bitmap. Basicly like the Zoomooz.js library, but I just know there must be a way to do it with GSAP ................. ................. . . . . . . Result should be: . X . With the "invisible" dom element zoomed in, but by using the viewBox. . X . . . ................. ................. When reading around the forums, I came across this post, which exactly does what I want, but this whole viewBox thing, seem to be a SVG thing, and therefor no help. This post Any ideas? Codepen: http://codepen.io/Abarth77/pen/MpJagb?editors=1111 The File: Zoom.zip

Hi I'm going to be adding an image gallery to a site and I basically have it so that when you click on an image, the image is cloned and reappears in the centre of the window. The codepen is here: http://codepen.io/emilychews/pen/YZGxWZ I would like it so that the cloned image goes through a transformation to arrive in its new position. At the moment when you click on the image, the clone just appears in the middle of the window. I can't seem to get my head around how to have it so wherever the image is on the screen, it smoothly transitions to the central position. I tried swapping out the CSS object in my JS with some tweens, but this was a bit of a non-starter. I'm quite up on the functionality of Greensock tweens and timelines now, however, I'm at a bit of a loss how to approach this. Any help or pointers would be amazing. Emily. For quick reference I've also cut and pasted the JS / HTML and CSS code below: JS $(function() { // ===== vars to evaluate the left positioning after the element is cloned. var $windowWidthMiddle = $(window).width()/2; var $holderWidthMiddle = $('.holder').width() * 1.5 / 2; var $left = $windowWidthMiddle - $holderWidthMiddle; // ===== vars to evaluate the top positioning after the element is cloned. var $windowHeightMiddle = $(window).height()/2; var $holderHeightMiddle = $('.holder').height() * 1.5 / 2; var $top = $windowHeightMiddle - $holderHeightMiddle; // ====== Clone each image when clicked - these all have the default class '.holder' $('.holder').on("click",function() { if ($( this ).find(".cloned").length == 0) { // if not cloned already var $myClone = $(this).clone() .insertAfter(this) .addClass('cloned') .css({ position: 'absolute', left: $left, top: $top, transition: 'all 1s' }); // ===== This adds the small 'x' to the cloned image to close it $myClone.prepend('<div class="closeX">X</div>'); } }); // ====== This is what causes the cloned image to be closed / removed $(".wrapper").on("click", ".closeX", function(e) { e.stopPropagation(); // this stops the click on the holder $(this).closest("div.cloned").remove(); }); }); CSS .wrapper {width: 100%; height: 100%;} /* This is each image before cloning */ .holder { width: 20vw; height: 100px; background: red; position: relative; margin-bottom: 5px; display: inline-block; z-index:0; transform-origin: top left; color: white; } /* The positioning 'top' and 'left' values after cloning are added in the javascript */ .holder.cloned { background: blue; z-index: 20; transform: scale(1.5); } /*CSS for the prepended 'x' that shows on the cloned element*/ .closeX { position: absolute; background: yellow; top: 5px; right: 5px; width: 25px; height: 25px; line-height: 25px; text-align: center; cursor: pointer; color: black; } HTML <div class="wrapper"> <!-- five images --> <div class="holder image1">Image 1</div> <div class="holder image2">Image 2</div> <div class="holder image3">Image 3</div> <div class="holder image4">Image 4</div> <div class="holder image5">Image 5</div> </div>

Hello, I am having a couple of issues, the first being a slight flicker on load of the homepage, before the animation kicks in, it flickers a preview of the page: http://2017.hypemarketing.uk. My second issue is more serious, on my mobile, Android - Chrome V. 56.0.2924.87 the animation seems to lag incredibly, and almost stops my mobile browser working, could someone help me figure out how to make this smooth. Any and all assistance would be greatly appreciated, my code is below. jQuery(document).ready(function($) { // Scroll Magic Controller var frontPageAnim_Controller = new ScrollMagic.Controller(); //Scroll Magic Controller // Animation vars var htmlContainer = $('html'), body = $('body'), viewPort = $(window).height(), // Height of viewport heroSection = $('.hero-section'), panelClickthroughs = $('.panel-clickthroughs'), portfolioPanels = $('.portfolio-panel'), portfolioSection = $('.portfolio-section'), socialSection = $('.social-section'), scrollDown = $('.scroll-down'), scrollDownArrow = $('.scroll-down i') header = $('header'), heroContent = $('.hero-content'), logoContainer = $('.logo-container'), logo = $('#hype-logo'), letter = $('.letter'), letterFill = $('.letter_fill'), logoBorderBottom = CSSRulePlugin.getRule(".logo-container:after"), overlayMenu = $("#overlay-menu"), listItemsOverlay = $("#overlay-menu #primaryMenu ul li"), heroBackground = CSSRulePlugin.getRule(".hero-panel:before"); var fadeSlogan = function () { TweenMax.to(header, 1, { y: 0, autoAlpha: 1 }); TweenMax.to(heroContent, 1, { y: 0, autoAlpha: 1 }); TweenMax.to(scrollDown, 1, { y: 0, autoAlpha: 1 }); }; function urlChecker() { if( window.location.href =="http://2017.hypemarketing.uk/" ) { var otherAnimations = new TimelineMax({ immediateRender: true }); // Start New timeline for all other animations otherAnimations .set(heroBackground, { opacity: 1 }) //has been set in css to remove skip .set(logo, {visibility:"visible"}) .set(letterFill, {visibility:"hidden"}) .set(header, {y: -80, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }) .set(heroContent, {y: -15, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }) .set(scrollDown, {y: 30, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }); } else { //Do nothing } } urlChecker(); // TweenMax Timelines var timelineHero = new TimelineMax({ immediateRender: true }); // Start New timeline for Hero Section & Portfolio var entranceAnim = new TimelineMax({ immediateRender: true }); // Start New timeline for Entrance Anim timelineHero .set(heroSection, { top: 0, position: 'absolute', force3D:"auto" }) .to(heroSection, 0.4, { top: -viewPort, opacity: 0, ease: Power2.easeInOut }); // Animation for timelineHero entranceAnim .set(logoBorderBottom, { ease: Power2.easeOut, force3D:"auto" }) .set(letter, {fill:"none", force3D:"auto", stroke: "00ffbc", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round"}) .fromTo(letter, 3, {drawSVG:0}, {drawSVG:"102%"}, 0) //now animate the logo strokes (note we use "102% as FireFox 34 miscalculates the length of a few strokes) .fromTo(logoBorderBottom, 3, { width: 0 }, { width: 100 + "%" }, 0) //draw out the load under hype .to(letterFill, 1, {autoAlpha:1, ease:Linear.easeNone}) //fade in the real logo and the rest of the text .to(letter, 1, { stroke: "ffffff;", ease:Linear.easeNone }) //fade the stroke to white .to(heroBackground, 3, { opacity: 0.9, ease: Power1.easeIn, onComplete: fadeSlogan }, 0.3); //fade the background // Scroll Magic Scenes var heroAnimation = new ScrollMagic.Scene({ triggerElement: heroSection, triggerHook: 0, duration: 1 }).setPin(heroSection).setTween(timelineHero).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Hero Section var portfolioSectionAnimation = new ScrollMagic.Scene({ duration: viewPort/2 }).setPin('.portfolio-section', { pushFollowers: true }).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Portfolio Section // Scroll Down Button Begin TweenMax.set(scrollDownArrow, { transform: 'translateY(0)' }); TweenMax.to(scrollDownArrow, 1, { autoAlpha: 0, repeat: -1, transform: 'translateY(10px)' }); scrollDown.click(function(){ TweenLite.to(window, 0, {scrollTo:1}); // Scrolls 1px on scroll to initiate the Hero Section sliding out }); // Scroll Down Button End });

OK, so I've properly enqueued TweenMax.min.js in my Wordpress install, in my child theme's functions.php file. It's loaded, as a check of the page shows. Just to make sure it's working, I added this test code to a page's footer code: <script type="text/javascript"> var blinkText = document.getElementsByClassName("blinking"); function blink() { TweenMax.to(blinkText, 0.3, { autoAlpha: 0, delay: 0.3, onComplete: function() { TweenMax.to(blinkText, 0.3, { autoAlpha: 1, delay: 0.3, onComplete: blink }); } }); } blink(); </script> When this page loads, the text doesn't blink and the DOM inspector shows an error, reporting "Uncaught ReferenceError: TweenMax is not defined." I don't have much JS experience, but obviously I've missed something simple, and obvious. Can someone help me out here? TIA! SOLVED: Ach, what a pain. It was just a case of script loading and timing. I changed the example code to what I pasted in below, and it works fine in WP, via the OH Add Script Header Footer plug. This plug makes it simple to add things like GSAP scripts on a per-page basis without having to create separate files in the WP child theme. <script type='text/javascript'> // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until window is loaded (images, stylesheets, JS, and links) window.onload = function() { //fade out and set visibility:hidden TweenMax.to(blinking, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenMax.to(blinking, 2, {autoAlpha:1, delay:2}); }; }); </script>

Hi all, like the topic already mentions do I have a problem with stuttering animations inside my TimelineMax animation and it would be really great, if somebody of you could help me. I'm currently developing a system for our company in which images and videos of our work can be uploaded/selected with the help of a CMS. These media should be animated afterwards, so that it looks like a dynamic generated showreel. So I used PHP to dynamically generate the JavaScript code and basically it works, but as you can probably see in the Codepen or in the demo, especially in Chrome the animations are stuttering a lot (depending on your computer/device). I have to say that I'm new to Greensock and also not the most experienced developer, so I would appreciate every advice of you. Regarding my code I guess there's a lot of potential for optimization. Especially the way of adding the subtimelines to the maintimeline and calling the functions of the subtimeline is probably wrong. For example: var mainTimeline = new TimelineMax({repeat:-1}); mainTimeline.add(websiteTimeline(website)); function websiteTimeline(website) { MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline"); // Create sub timeline var timeline = new TimelineMax(); // Add tweens to sub timeline timeline.call(morphToPhone); function morphToPhone() { TweenMax.to("#bezel-macbook", 0.2, {morphSVG:"#bezel-phone"}); TweenMax.to("#camera-macbook", 0.2, {morphSVG:"#camera-phone"}); TweenMax.to("#screen-macbook", 0.2, {morphSVG:"#screen-phone"}); TweenMax.to("#shape-macbook", 0.2, {morphSVG:"#lock-phone", css:{opacity:0}}); TweenMax.to("#line-macbook", 0.2, {morphSVG:"#speaker-phone", css:{opacity:0}}); TweenMax.to("#touchpad-macbook", 0.2, {morphSVG:"#lock-phone"}); } } I also already read about the performance differences between JavaScript and CSS, so my next step would be to use more pure CSS and less TweenMax animations, but I wanted first ask you guys, if you have some better advices for me. I hope anyone of you can help me. Here again the links to my Codepen and demo... Codepen: http://codepen.io/mathis-krueper/pen/ZeQEzZ Demo: http://mathis-krueper.de/captain/references/ Thanks in advance!

I've been working on an animation that works standalone as expected on scroll, it basically staggers on scroll so each path in my SVG animated in fast fade on scroll down, and fade out on scroll up. I was looking at this article but cannot work out how to import the scripts and get it running via RequireJS like I can standalone: https://github.com/janpaepke/ScrollMagic/issues/160#issuecomment-59058452 Here is my code example, it's WIP so the code is not absolutely correct yet. require.config({ baseUrl: '../ScrollMagic/js', paths: { TweenMax: '_dependent/greensock/TweenMax.min', TimelineMax: '_dependent/greensock/TweenMax.min', ScrollMagic: 'jquery.scrollmagic', ScrollScene: 'jquery.scrollmagic', "ScrollMagic.debug": 'jquery.scrollmagic.debug', jquery: '_dependent/jquery.min' } }); require(['jquery', 'ScrollMagic', 'ScrollScene', 'ScrollMagic.debug'], function( $, ScrollMagic, ScrollScene, debug) { // do stuff }); This is a cut down version of my working code: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> <script> // init controller var controller = new ScrollMagic.Controller(); </script> <div class="spacer s_viewport"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve"> <g id="mainsvg"> <path d="..." /> <!-- x27 of these pathes --> </g> </svg> <script> // build tween var tween = TweenMax.staggerFromTo("path", 2, { opacity: 0 }, { opacity: 1, ease: Back.easeOut }, 1); // build scene var scene = new ScrollMagic.Scene({ triggerElement: "#mainsvg", duration: 200 }) .setTween(tween) .addIndicators({ name: "staggering" }) // add indicators (requires plugin) .addTo(controller); </script> <div class="spacer s_viewport marker"></div> Can anyone help please? Thanks in advance!

Hi, We are having issues trying to finesse a card folding animation. Basically we would like to have a square with sides folding out from within the square to create an unfolding effect. If you take a look at the Codepen you should be able to get an idea of the effect. We are currently using scaleX but unsure if this is the best and way to achieve this type of effect? Many Thanks

Dear Greensock Community, my task is simple and clear: I want to rotate a svg group <g id="rotationFrame>. I have written the following TweenMax to achieve this: TweenMax.to("#rotationFrame", .5, { rotation:rotationDeg, transformOrigin:"50% 50%" }); This does work quite good using safari. But as soon as I switch to Chrome the code does some crazy stuff: Demo: https://vid.me/9EJU How can I solve this? To me it seems like Greensock is creating some wired css code, like transform-origin: 0px 0px 0px; transform: matrix(-0.86602, 0.49999, -0.49999, -0.86602, 957.167, 575.015); As soon as I change this manually to something more straight forward, it does work in chrome: transform-origin: 50% 50% transform: rotate(90deg);

I'm looking for any suggestions as to what might cause the bug I'm currently experiencing in TweenMax 1.19.1 -- I've run out of ideas. Here are the basics: I'm doing a TweenMax.staggerFromTo transformation that simply moves several elements from -20px and 0 opacity to 0px and 1 opacity. The classic "fade in from the left." The animation runs perfectly except that, with the most recent update to TweenMax, the opacity portion of the tween is being skipped altogether. The opacity of the elements is never modified and, even with clearProps not being used, opacity is not left in the Styles attribute after the transformation. The result is that the elements appear on the screen, then move 20 pixels to the right in sequence with no fade in. Some additional information: This bug appears in 1.19.1 only. I can switch back to TweenMax 1.19.0 and it won't appear, switch again to 1.19.1 and it will. So it's something that changed between this version and the last. I've tested in on Chrome and Firefox so it isn't just a single browser. While I've copied the basic situation in a Codepen, I cannot seem to reproduce the bug. There's a lot going on on this page, but no other modifications to this element take place before the Tween with the problem. I've tried adding every CSS attribute assigned to the real element to the Codepen element and I've reproduced the nested function/promise/function structure of the js, but I can't get the issue to appear. The attached pen does show the context, at least. If I set the debugger to break on attribute modification, in 1.19.0 it breaks first on the opacity part of CSSPlugin.js at line 2611. In 1.19.1 it breaks on the matrix portion of CSSPlugin.js at line 1722, skipping the opacity code entirely. If I try to modify only the opacity and not the position, it does nothing at all and no attributes are modified on that element. It's definitely only the opacity tween that's affected. Any thoughts on what has changed in 1.19.1 that could lead to opacity being skipped in a staggerFromTo under certain conditions? I'd prefer not to have to freeze Greensock updates on this project and stay with 1.19.0 for good, but I've spent more than a day on this and I still can't figure out what might be causing this deeply obscure problem.

Hey guys, I'm trying to figure out how to make this fish vector appear to make a flopping in-air animation. At first I was thinking that MorphSVG would be the ideal tool for this, but then diving deeper I'm noticing that there's so many paths I believe I would have to find an ideal shapeIndex for each to get a fluid motion. Transform gives off the whole 2D vibe since I'm using scale -1 to give the appearance of a reflection during the flopping animation. This is a link to a primitive attempt to use MorphSVG http://codepen.io/dylan9o4/pen/bgQLyP And this is a link to a primitive attempt using regular transforms http://codepen.io/dylan9o4/pen/dNQdxe Any help would be greatly appreciated!

In the docs (https://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/) I notice it says that to use Draggable, all you need is TweenMax. "REQUIREMENTS: TweenLite and CSSPlugin or just TweenMax which contains both." However, at the top of TweenMax.js (v 1.19.1) it says "Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin" and there is no mention of 'Draggable' anywhere within the file. The CSSplugin.js file also seems to contain no mention to 'Draggable'. I am having to include the Draggable utility separately in order to use it. Is this an error in the documentation, or am I missing something?

GreenSock Community, Thanks for taking the time to read this post, also thanks in advance for any help you may provide. I have a modal that scales up a selected thumbnail into a scrollable slide container. Please note the CodePen only has the "Advil" link set to call in Ajax content (HTML and JS) from another CodePen Ajax-Modal-Content I have two problems with the Tween Path: The starting position does not seem to be the correct coordinates, despite my using that part of the code exactly as what the original example is using (see getPosition function and the rect var). I'm having an issue with the path animating on an arc (curved path). I think this is due to my using Top 50% and Left 50% along with transform/translate to center the image within the browser's window)... I seem to remember reading somewhere in the GSAP forums that this is due to the rendering order... that Top/Left/Right/Bottom are calculated last... if this is true, do you have any suggestions on how to center the image within the browser's window and solve this render order issue? The modal is based on a CodePen by one of the GreenSock Moderators (thanks again Blake for all the help Responsive Grid ). Also,the slide container is based on another GreenSock Community Member's example (thanks Chrysto http://codepen.io/bassta/pen/kDvmC). I have made the main part of the tween set to 6 seconds (slowing it down) so you can see how the starting position is off and how the top and left calculations happen at the end. Thanks again for any help/guidance.

Hi Ive been struggling to figure this out for about 3 days now. I am creating columns dynamically that are added to a container (when user clicks the add button). Using the draggable plugin I have made them draggable (only horizontally). Everything works fine but what I am stuck with is when a column is dragged and dropped on another then (the dragged column) should be placed either to the left or right of the target column. This is my code thus far. Any help will be greatly appreciated. Draggable.create($element, { // use $element instead of ".column". This is declared at the top ^^^ and refers to this specific instance of 'column' type: "x", edgeResistance: 0.65, throwProps: true, bounds: {left: 0}, lockAxis: true, autoscroll: 1, trigger: $element.find(".drag-handle"),// Use jQueryLite (built in to Angular) to find this column's drag handle onPress: function () { columnList = $(".column:not(#" + $element.attr("id") + ")").toArray(); initialCoords = ($element.css("left")); console.log(initialCoords); }, onDragEnd: function (e) { for(var i = 0; i < columnList.length; i++){ if(this.hitTest(columnList[i], overlapThreshold)) { var jqueryColumn = $(columnList[i]); var objectTwoCoord = jqueryColumn.position(); console.log(jqueryColumn); TweenLite.to(this.target, 0.5, {x: initialCoords }); } } } });

Hi everyone, Thanks in advance for your help. I've gotten pretty familiar with GSAP/Scroll Magic over the past year or so and have used it on many projects. This is the first time I've been unable to get things working via troubleshooting/docs... so hopefully it's even possible. I'm trying to create an interactive timeline that will trigger new slides whenever you reach the next "period/year". However, the timeline has to remain pinned as you scroll. The functionality isn't quite there yet, but I've added indicators to show the issue I am having. Whenever you scroll it pushes the individual scenes down. Is there anyway around this? What I've tried so far: • Adding two controllers, one for the pinned scene, and another for the individual period scenes. No luck. • Using the "pushFollowers: true" setting on the pinned scene. No luck. • Using start and progress callbacks combined with bloated math programming - but it felt hacky and ultimately will be too hacky for a live production site. Thanks again!

Hi, I am new to the GreenSock forum and would greatly appreciate some insight and help. I have found some great posts with useful answers concerning 'Counters' however none with a separator. I apologise if I have missed one or if this post is in the wrong place. I'm trying to add a comma to the below code to give the 'thousands' a decimal place eg 2,100. var counter = { var: 0 }; var tal = document.getElementById("tal"); TweenMax.to(counter, 5, { var: 2100, onUpdate: function () { tal.innerHTML = Math.ceil(counter.var); }, ease:Circ.easeOut }); In the past I have used countUp.js to achieve this. But was wondering if TweenMax has a simple way to execute with out adding an additional js file. Any help would be appreciated. Thanks Barrett

Hello all, This is my first post in this forum. I have recently started using Greensock in my projects and it's the best javascript plugin out there on internet. So thank you so much for making this and helping people like me. Here is the codepen url: http://codepen.io/cooldhavs/pen/GrBraM This example uses Scrollmagic and Tweenmax timeline. My question is, when I resize the window below 990px, animation should stop immediately and it should show fixed layout below 990px. So when I resize window below 990px, all the boxes should stay touched at the bottom left corner and won't do any animation. But when browser window is below 990px and i am in the middle of the page and I resize the window to more than 990px, animation should start from the right point. I am not sure if this is good enough to explain the problem. So let me know if you require more information on the issue. I have used this kind of animation in two different projects and I am not able to find any answer to this. So please help. Thanks, Dhaval

Hello, I have no code pen URL for this question, because I don't know if I can get this in there without importing most of my animation framework, etc. This is really a question of how to accomplish this in your framework. Background Details I have a configuration file in PHP which provides the details for each Tween animation, and I've specified friendly names in my code to give me details of the animation. I'll post an example of one of the animations in the end of this post so you can see the fields, structure I provide. I have a JSON object below which represents how I format my object before passing it to my functions to animate. { "entrance":{ "900":[ { "layerId":"HLS2-3033-N25V", "animation":"bounceInLeft", "speed":0.49, "time":900, "easing":"Power1.easeIn" } ], "1700":[ { "layerId":"5MBE-0R7G-65NK", "animation":"zoomInDownRotate", "speed":0.9, "time":1700, "easing":"Power4.easeOut" } ] }, "exit":{ "4800":[ { "layerId":"HLS2-3033-N25V", "animation":"slideOutLeft", "speed":0.49, "time":4800, "easing":"Power1.easeIn" } ], "6900":[ { "layerId":"5MBE-0R7G-65NK", "animation":"slideOutLeft", "speed":0.9, "time":6900, "easing":"Back.easeInOut" } ] } } This array above is sorted by Entrance and Exit animations, and in each of these I have indexes by MS timings from 0 - 10000 (0-10s) I obtain the animation details using the name, and it returns in a structure like below, which I use to produce my single animation on one element nicely. { "name":"bounceInLeft", "type":"Bouncing", "stageType":"entrance", "defaultDuration":0.35, "defaultEasing":"Power1.easeOut", "series":[ { "x":"{elementOuterStartLeft}", "opacity":0, "duration":0.8, "ease":"Elastic.easeOut.config(.85, 0.4)" } ] } So with these 2 pieces, I run my animation for a single layer using TimelineMax and then I loop through the series of the animation keeping the first index using timeline.from() with my parameters, while any other index in the series array is using timeline.to() My question is this: Knowing when each of the animations are going to begin, using the MS indexes in my above format, can I "schedule" the tweens to play when the MS is reached in the 0-10s interval? How would I implement this using purely your framework? I would essentially add a from/to for each animation series item, whenever the animation is called and it's timing matches the current point in the 0-10s interval. I'm trying to utilize this similar to the example on your CodePen : http://codepen.io/GreenSock/pen/zinsg so that I can control pause, play, and the timing range for the animation as a whole (for all my elements being animated) Let me know if you need further clarification. Thanks, Justin

Hi Guys, I am trying to make the yoyo animation to loop infinite time with some pause. Like it will shake about 5 times then pause for 2 sec and then repeat shaking. Is it possible? Thanks

Hi guys! I am new to Greensock and I am so amazed about the power it has. I started to learn how to use it and during one of an example project I found a problem in which I can't go on. The problem: I have a panoramic photo, that is bigger than the screen and I want to use TweenMax to move over it and show also the hidden part, till now is everything ok, the problems come if I want to move to the same direction more than one time. For example when I want to discover the right part of the image and I push on my arrow button to move right the first time I push it works, but the second time I push it doesn't move again. Surely is a much more simple problem than how I think but I would really want to know if is normal that doesn't work more than once. Here there is the code of the Tweens: $('#frecciaDx').on('click', function () { TweenMax.fromTo("#stanza", 0.8, {css:{marginLeft:0}}, {css:{marginLeft:-200}}); }); $('#frecciaSx').on('click', function () { TweenMax.fromTo("#stanza", 0.8, {css:{marginLeft:0}}, {css:{marginLeft:200}}); }); $('#frecciaSu').on('click', function () { TweenMax.to("#stanza", 0.8, { y: 600 }); }); $('#frecciaGiu').on('click', function () { TweenMax.to("#stanza", 0.8, { y: -600 }); }); Thank you really much guys!

I have animated an element's attribute using TweenMax like this: TweenMax.to($(".element"), 2, { rotation : 180 }); Later on, I need to get the value of the rotation, is it possible? Something like this: TweenMax.getValue($(".element"), "rotation"); // just an example How can I get the value of an attribute animated by TweenMax?

Sorry for my english. If scrolling to top (use browser scroll bar) the scenes are brokes. Also if you will fast click on different nav links the scenes brokes. How to resolve this problem? Screenshots attached

Hi there. First of all I want to thank you for such a great animation platform as GSAP. I am beginner in it, and I have some questions. I have a task to animate my card of product. First it's just drawing a path of svg patterns. Second when onHover event is fired Iwant to put it up and put down them and drawing them in reverse direction simultaneously. More you can see on codepen link. I have done it, but when I call hover event in during the first animation, my svg path is cut. Why? What's wrong with it? I pin screen of bug http://joxi.ru/82QMg35TGO9b2d

Hi there, I am new to greensock and even to jquery/javascript at all. I am trying to scale the "g" parts of a svg element from 0 to 1. It already works but the elements don't stay in their end position when they are animating, but "move" in along the x and y axis. I am wondering if there is a way, that they stay fixed in their position and just scale from 0 to 1? I already searched the forum and found advises about transformOrigin, but none of them solved my problem.

Hi everyone, I'm hoping you can help me. I'm putting together an animation of a play button. Everything works fine on mouseenter and mouseleave, but my problem is, the SVG is not rendered on page load. The circle, that is. What I tried: When I removed `.fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut})` from my timeline, the bug disappeared. For some reason, the drawSVG of 100% 100% seems to be applied to the svg even though the timeline is paused? Timeline.progress has not worked, but clearProps: drawSVG did fix it (although obviously I can't clear the drawSVG on init). Any help would be hugely appreciated. Thanks! PS. Sorry a codepen isn't included. I don't have a PRO account so I couldnt upload GSAP to it. LMK if you'd still like me to create it if it makes it easier for you to debug. $playButton.each(function (index, elem) { $this = $(this); var $circle = $this.find('#play-icon__circle'); var $caret = $this.find('#play-icon__caret'); TweenMax.set($caret, {transformOrigin:"50% 50%", scale: 1}); TweenMax.set($circle, {opacity: 1, rotation: "-90", transformOrigin:"50% 50%"}); var playButtonTimeline = new TimelineMax({paused: true}); playButtonTimeline .fromTo($circle, .3, {drawSVG: 'true', opacity: 1}, {opacity: .5, drawSVG: '100% 100%', ease: Expo.EaseOut}) .set($circle, {rotationX: -180}) .fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut}) .to($caret, .2, {scale: .7, ease: Expo.EaseOut}, '-=.4'); $this .mouseenter(function () { if(playButtonTimeline.isActive()){ e.preventDefault(); e.stopImmediatePropagation(); return false; } playButtonTimeline.play(0); }) .mouseleave(function () { if(playButtonTimeline.isActive()){ e.preventDefault(); e.stopImmediatePropagation(); return false; } playButtonTimeline.reverse(0); }); });