Search the Community

Hi @GreenSock I think about something, but without affecting to your bussiness model, can i do that? I explain this below: Let's say, i creating web-sites, mobile apps, own personal websites with one-off sold, as i know one-off sold doesn't require GSAP license. If i'm create plug-ins (GitHub repo, No-License, without license no-one allowed to use app) for GSAP for myself like morphSVG, drawSVG (i sure your plug-ins great, but my budget not good to be member of Club, thanks to GSAP anyway), i not required to buy license? I can use GSAP for free, usually i'm use TweenMax, TimelineMax. Thanks for reply.

Hi, First of all. We love Greensock. We have used it on about 3 new client projects already and find it incredible! So great work! I'm trying to get the following animation to work however and am having some issues. This is the following animation. See screenshot. The animation should be as follows: The T appears The line from the T to the D animates the stroke with DrawSVG. The D appears The line from the D to the L animates the stroke with DrawSVG. The L appears The line from the L to the T animates the stroke with DrawSVG. This is the following code that I have: const tl = new TimelineLite({delay:0.5, repeat:-1, repeatDelay:2}); tl.from(this.letterT, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut}) .from(this.line1Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone}) .from(this.letterD, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut}) .from(this.line2Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone}) .from(this.letterL, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut}) .from(this.line3Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone}) Now if I'm correct each .from should run after each other. This is working fine with the letters but the line ones run the moment the animation starts. I've tried using the Position Parameter on those line ones to no avail. Any help with this would be greatly appreciated. Thanks

Hello, I'm following along with the DrawSVGPlugin tutorial on the website, but seem to be having trouble getting DrawSVG to run. I am a Club Greensock member, so I believe I've pasted in the latest version of TweenMax, which should give me access to the plugin, correct? Thank you for your help.

Hi there, first post on the forums. Excited to be using Greensock, it's been great so far. I'm trying to accomplish 2 drawSVG staggered animations on an SVG path using Timeline: 1) Draw the stroke 2) Draw the fill If I combine them into one Tweenmax.from() call, it works great. However, when I stagger them, the 2nd from() call where I'm passing fill is trying to redraw the stroke as well. Is it possible to let the call know to ignore the stroke in the 2nd from() call? Thanks!

Hi! Does anyone have any experience in animating paths (drawSvg style) with greensock in Animate CC? Does drawSvg translate in to use in Animate CC? regards,

Hi there, Why is the line drawn with breaks?

There seems to be a problem with DrawSVGPlugin for me: I can not make it work when I try with the hosted file and not within Codepen. I am ShockinglyGreen member so there is no issue with this. The problem is that I run the same code against Codepen-specific version and against the hosted version of the script. You can see the result yourself: Codepen-specific (where lines get drawn): And here is the other version with the file being self-hosted on a server: As you can see in this second case, the lines do not get drawn and the whole contour shows up instantly What do I miss here? Thank you.

I have been working on this project for the past few months where I use drawSVG to draw an SVG. Everything seems to work as it should in Chrome and Safari but it won't draw the lines in IE. I pulled the code from my project and put together this pen. If you run it in Chrome you will see the lines draw on the screen. If you run the pen in IE the shape just appears. I opened up the javascript console in IE and I notice it is throwing an error, SCRIPT65535: Unexpected call to method or property access. DrawSVGPlugin.min.js (13,1184). Anyone have any ideas as to what I am doing wrong?

I'm trying to draw the stroke, then fill the shapes. What am I missing here?

Hi, all. When I try to import the DrawSVGPlugin to a NuxtJS project, I get the following error: TypeError: Cannot read property 'defaultView' of undefined at /Users/mdf/Sites/nuxtproject/node_modules/gsap/DrawSVGPlugin.js:19:27 at Object.<anonymous> (/Users/mdf/Sites/nuxtproject/node_modules/gsap/DrawSVGPlugin.js:202:54) at Module._compile (module.js:569:30) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:503:32) at tryModuleLoad (module.js:466:12) at Function.Module._load (module.js:458:3) at Module.require (module.js:513:17) at require (internal/module.js:11:18) at r (/Users/mdf/Sites/nuxtproject/node_modules/vue-server-renderer/build.js:5812:16) at Object.<anonymous> (webpack:/external "gsap/DrawSVGPlugin":1:0) at __webpack_require__ (webpack:/webpack/bootstrap 8aad739dc52752aa5015:25:0) at Object.70 (2.server-bundle.js:123:77) at __webpack_require__ (webpack:/webpack/bootstrap 8aad739dc52752aa5015:25:0) at Object.61 (pages/index.vue:7:0) at __webpack_require__ (webpack:/webpack/bootstrap 8aad739dc52752aa5015:25:0) The error is related to the call to `_doc.defaultView` and only happens when the page is server rendered, not when it is client rendered. I'm not sure if there is an issue with the vue-server-renderer package or if I'm not importing the plugin correctly. I've tried importing the plugin from the assets folder import TweenLite from 'gsap'; import '~/assets/DrawSVGPlugin'; as well as copying it into the gsap folder in node_modules import TweenLite from 'gsap'; import 'gsap/DrawSVGPlugin'; Both produce the same error. The error is also not Nuxt-specific but happens whenever Vue server-side rendering is used. I put together a bare-bones example to illustrate the problem here https://github.com/michaeldfoley/vue-ssr-drawsvgplugin-error. Any help would be appreciated.

Hi, Is it possible to animate a filled path so it effectively draws like the drawSVG plugin does for stroked paths? Will it be a case of having to learn how to animate SVG coordinates (if this is even possible?). I have seen a (somewhat complicated) method on StackOverflow on how to convert a filled path into a stroked path. Any tips / suggestions on further reading on how to create a 'draw' effect on filled paths would be wonderful (if it is possible to do). Thanks, Emily.

Hi All I've created a drawSVG but when comparing it to a vivus.js version, they start from different points, how can I control the starting points on my GSAP version? Any help appreciated

Is it possible to stack an img on top of an animating drawSVG? Just looking for a simple yes or no at the moment. I've got something working so far…

I have created a basic drawsvg animation where the content of the circle fills with a colour. I will have multiple circles on a page so I want the animation to loop through each item which I have achieved with the staggerFromTo. The next step is to feed in dynamic values for the drawsvg animation which I was hoping to pull from data-percent="x" as the values will be output on the page. I have done this but I am not sure on the best way to loop through this data...as at the moment it only pulls in the last data att value rather than the unique value for each circle. I hope my intention is clear. Any help would be appreciated

Hi. First of all, I'd like to say I'm sorry cause I'm really new in tweening. I've made an example of what I'm trying to do. I need to animate that circle making each stroke to go from 0 to 100, one after other, clockwise. Each one will have a different color. The way I tryied, It did't work at all. The stroke animate, and then back to point zero. I need something more like animating fill.

Hey fellow GreenSockers. I was going to post this in the SVG Gotchas thread, but this question is asked a lot around here so I thought maybe a new topic would be the way to go. SVG circles start at 3 o’clock and most people want to animate the stroke from the 12 o’clock position. Conventional wisdom would tell you to simply rotate the circle by -90 degrees and you’re all set, but there are some problems with this approach. Using GSAP to rotate the circle -90 degrees will work perfectly fine in Chrome and FF, but Safari will ignore that set() for some reason. (IE and Edge honor the rotation, but they have another problem.) You can simply add a transform attribute directly to the circle like <circle cx="500" cy="75" r="60" transform="rotate(-90 500 75)"/> This will work correctly in Chrome, FF and Safari, but not completely in IE and Edge. If you're animating the stroke with DrawSVG, IE and Edge need the stroke-dasharray set to 0 in the attributes or they will cause problems. If you don’t add that attribute, a regular circle will start at 9 o’clock and the circle that you’ve rotated -90 degrees with GSAP or a transform attribute will start at 6 o’clock. Strangely, if you resize the browser window to the point of the SVG changing size, IE and Edge will correct themselves. The only bulletproof way I see to draw a circle stroke from the 12 o’clock position with DrawSVG in all browsers is transforming the circle -90 degrees and adding the extra attributes to keep IE and Edge happy. <circle cx="500" cy="225" r="60" stroke-dashoffset="0" stroke-dasharray="0" transform="rotate(-90 500 225)"/> It appears that only adding the stroke-dasharray attribute fixes the IE/Edge issues, but I also add a stroke-dashoffset="0" attribute also just to be safe. Check out the demo in all your browsers. Hopefully this helps somebody with this type of animation. Happy tweening.

Hello and thanks in advance to anyone who helps. I have a simple logo that I'm using DrawSVG on. I started using CSS only using stroke-dashoffset and stroke-dasharray Then I forked the DrawSVG CodePen to try that and added in my logo (see codepen link, look really closely to see the notches in the line on the codepen and reference my attached image). Both CSS only method and DrawSVG use stroke-dashoffset and stroke-dasharray to animate the line drawing effect. Notches problem: I believe it is stroke-dasharray that causes the notches in my path outline. (See attached image for notches). Once stroke-dasharray is at 0 the notches go away. I've also tried to save the svg with paths grouped in various ways out of adobe illustrator. I'm brand new to SVG's and animating them. Fingers crossed that someone has a fix for me.

Hi there, I have attempting to get the scrollmagic and drawSVG to work in succession together but having little luck. I have followed each step in setting up the scrollmagic scene and applied the drawSVG tween to path elements with the appropriate class that I want animated, but seem to be having no luck. Any help getting this resolved so I can trigger the paths to draw downwards as the user scrolls would be greatly appreciated! Cheers, Jon

Hey all, I think I must be overlooking something pretty basic here - would appreciate any help. I simply want to animate this heart which is broken into 2 strokes, "heartL" and "heartR." I want each stroke to animate 0-100% but I can't seem to get them to work. 2 Quick notes: 1. I am adding the SVG from JS because that's what I need to do in my particular case outside this example. 2. I don't know how to add drawSVGplugin in codepen bc I only have a local copy and didn't want to put it up somewhere where people could just steal it... Thanks for any help you can offer! B

I want the SVG animation that I found on the left to have the same effect on the right element. What am I doing wrong?!!?!!?! This is driving me crazy -- why is there a double stroke effect? How can I fix this. Any assistance would be greatly appreciated. Thanks!

Hello there, this is my first time posting in the GreenSock forum, please be nice Essentially, I am trying to animate an SVG pie graph, today is my first day using DrawSVG, and I would really like someone to help me with a starting point So far I have successfully animated a few layers on the pie graph, but I am now having trouble animating the text. I have converted them to paths in illustrator. I am using tweenmax, timelinemax, drawsvg, and I will be using scrollMagic to trigger the effects. Here is my SVG code <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 600 400" style="enable-background:new 0 0 600 400;" xml:space="preserve"> <style type="text/css"> .st0 { fill: none; stroke: #FF0000; stroke-width: 1.9271; stroke-miterlimit: 10; } .st1 { fill: none; stroke: #9A0D12; stroke-width: 1.9271; stroke-miterlimit: 10; } .st2 { opacity: 0.22; fill: none; stroke: #FFFFFF; stroke-width: 6; stroke-miterlimit: 10; } .st3 { fill: none; stroke: #FF0000; stroke-width: 10.599; stroke-linecap: round; stroke-miterlimit: 10; } .st4 { fill: none; stroke: #9A0D12; stroke-width: 10.599; stroke-linecap: round; stroke-miterlimit: 10; } .st5 { fill: #FFFFFF; } </style> <line class="st0" id="path1" x1="344.9" y1="108.9" x2="439.3" y2="108.9" /> <line class="st1" id="path2" x1="345.3" y1="199" x2="439.8" y2="199" /> <circle class="st2" id="path3" cx="267.3" cy="200" r="115.6" /> <circle class="st2" id="path4" cx="267.3" cy="200" r="77.6" /> <path class="st3" id="path5" d="M267.3,84.4c63.9,0,115.6,51.8,115.6,115.6s-51.8,115.6-115.6,115.6c-22.6,0-43.6-6.5-61.4-17.6" /> <path class="st4" id="path6" d="M267.3,122.4c42.8,0,77.6,34.7,77.6,77.6c0,39.9-30.2,72.8-68.9,77.1" /> <g> <g> <path class="st5" d="M404.2,127.9c0.3-0.4,0.6-0.7,0.9-0.8c0.7-0.5,1.5-0.7,2.5-0.7c1.7,0,3,0.7,3.8,2c0.6,1,0.9,2.2,0.9,3.6 c0,1.4-0.3,2.6-0.8,3.6c-0.8,1.7-2.3,2.5-4.4,2.5c-2.1,0-3.5-0.9-4.3-2.6c-0.6-1.2-0.8-3-0.8-5.3c0-7.2,2.1-10.8,6.4-10.8 c0.9,0,1.7,0.1,2.6,0.4v1.6c-1-0.3-1.8-0.5-2.6-0.5c-1,0-1.9,0.4-2.5,1.2c-0.7,0.9-1.1,2.1-1.4,3.7 C404.3,126.4,404.2,127.1,404.2,127.9z M407.2,127.7c-0.8,0-1.5,0.3-2.1,1c-0.7,0.8-1,1.9-1,3.4c0,1.3,0.2,2.3,0.6,3.2 c0.5,1,1.3,1.5,2.3,1.5c1.1,0,1.9-0.5,2.3-1.6c0.4-0.9,0.6-1.9,0.6-3.2c0-1.1-0.2-2.1-0.5-2.9C409,128.2,408.2,127.7,407.2,127.7z " /> <path class="st5" d="M420.8,119.4c2.3,0,3.8,1,4.6,3.1c0.5,1.3,0.8,3.4,0.8,6.3c0,3.1-0.3,5.4-1,6.7c-0.9,1.8-2.3,2.6-4.4,2.6 c-2.2,0-3.8-1-4.6-3.1c-0.5-1.3-0.8-3.4-0.8-6.4c0-3.1,0.3-5.3,1-6.6c0.4-0.8,1-1.5,1.6-1.9C418.8,119.7,419.7,119.4,420.8,119.4z M420.8,120.9c-1.3,0-2.2,0.8-2.6,2.5c-0.3,1.1-0.5,2.9-0.5,5.3c0,2.8,0.2,4.8,0.6,5.9c0.5,1.4,1.4,2.1,2.5,2.1 c1.3,0,2.2-0.8,2.7-2.5c0.3-1.1,0.5-2.9,0.5-5.4c0-2.8-0.2-4.7-0.6-5.8C422.8,121.6,422,120.9,420.8,120.9z" /> <path class="st5" d="M430.7,118.8c0.9,0,1.5,0.3,1.8,1c0.2,0.4,0.3,1,0.3,1.8c0,0.9-0.1,1.5-0.4,2c-0.3,0.6-0.9,0.9-1.7,0.9 c-0.9,0-1.5-0.3-1.8-1c-0.2-0.4-0.3-1-0.3-1.8c0-0.8,0.1-1.5,0.4-1.9C429.3,119.1,429.9,118.8,430.7,118.8z M430.7,119.4 c-0.4,0-0.6,0.2-0.8,0.7c-0.1,0.3-0.2,0.9-0.2,1.5c0,0.8,0.1,1.4,0.2,1.7c0.1,0.4,0.4,0.6,0.7,0.6c0.4,0,0.7-0.2,0.8-0.7 c0.1-0.3,0.2-0.9,0.2-1.6c0-0.8-0.1-1.3-0.2-1.7C431.3,119.5,431.1,119.4,430.7,119.4z M430.7,129.8l4.8-10.8h0.9l-4.8,10.8H430.7 z M436.5,124.2c0.9,0,1.5,0.3,1.8,1c0.2,0.4,0.3,1,0.3,1.8c0,0.9-0.1,1.5-0.4,2c-0.3,0.6-0.9,0.9-1.7,0.9c-0.9,0-1.5-0.3-1.8-1 c-0.2-0.4-0.3-1-0.3-1.8c0-0.8,0.1-1.5,0.4-1.9C435.1,124.5,435.6,124.2,436.5,124.2z M436.5,124.8c-0.4,0-0.6,0.2-0.8,0.7 c-0.1,0.3-0.2,0.9-0.2,1.5c0,0.8,0.1,1.4,0.2,1.7c0.1,0.4,0.4,0.6,0.7,0.6c0.4,0,0.6-0.2,0.8-0.7c0.1-0.3,0.2-0.9,0.2-1.6 c0-0.8-0.1-1.3-0.2-1.7C437.1,125,436.8,124.8,436.5,124.8z" /> </g> </g> <g> <g> <path class="st5" d="M408.4,226.8v-4.2h-7.1v-1.4l5.4-12.4h2.1l-5.4,12.3h4.9v-4.5h2.1v4.5h2.1v1.5h-2.1v4.2H408.4z" /> <path class="st5" d="M423.6,218.3c-0.3,0.3-0.5,0.6-0.7,0.7c-0.7,0.6-1.6,0.8-2.7,0.8c-1.7,0-3-0.7-3.8-2 c-0.6-0.9-0.9-2.1-0.9-3.6c0-1.4,0.3-2.5,0.8-3.5c0.8-1.6,2.3-2.5,4.4-2.5c2.1,0,3.5,0.9,4.4,2.6c0.6,1.2,0.8,3,0.8,5.5 c0,2.4-0.2,4.3-0.6,5.8c-0.8,3.2-2.7,4.8-5.9,4.8c-1,0-2.1-0.1-3.1-0.4v-1.6c1.1,0.4,2.1,0.5,3.1,0.5c1.8,0,3-0.9,3.6-2.8 c0.3-0.9,0.4-2,0.5-3.3C423.5,219.3,423.6,218.9,423.6,218.3z M420.7,209.7c-1.1,0-1.9,0.5-2.3,1.5c-0.4,0.8-0.6,1.9-0.6,3 c0,1.1,0.2,2,0.5,2.7c0.5,0.9,1.2,1.4,2.2,1.4c0.8,0,1.5-0.3,2.1-1c0.7-0.8,1-1.8,1-3.2c0-1.2-0.2-2.3-0.6-3.1 C422.5,210.2,421.7,209.7,420.7,209.7z" /> <path class="st5" d="M430.7,207.8c0.9,0,1.5,0.3,1.8,1c0.2,0.4,0.3,1,0.3,1.8c0,0.9-0.1,1.5-0.4,2c-0.3,0.6-0.9,0.9-1.7,0.9 c-0.9,0-1.5-0.3-1.8-1c-0.2-0.4-0.3-1-0.3-1.8c0-0.8,0.1-1.5,0.4-1.9C429.3,208.1,429.9,207.8,430.7,207.8z M430.7,208.4 c-0.4,0-0.6,0.2-0.8,0.7c-0.1,0.3-0.2,0.9-0.2,1.5c0,0.8,0.1,1.3,0.2,1.7c0.1,0.4,0.4,0.6,0.7,0.6c0.4,0,0.7-0.2,0.8-0.7 c0.1-0.3,0.2-0.9,0.2-1.6c0-0.8-0.1-1.3-0.2-1.7C431.3,208.5,431.1,208.4,430.7,208.4z M430.7,218.8l4.8-10.8h0.9l-4.8,10.8H430.7 z M436.5,213.2c0.9,0,1.5,0.3,1.8,1c0.2,0.4,0.3,1,0.3,1.8c0,0.9-0.1,1.5-0.4,2c-0.3,0.6-0.9,0.9-1.7,0.9c-0.9,0-1.5-0.3-1.8-1 c-0.2-0.4-0.3-1-0.3-1.8c0-0.8,0.1-1.5,0.4-1.9C435.1,213.5,435.6,213.2,436.5,213.2z M436.5,213.8c-0.4,0-0.6,0.2-0.8,0.7 c-0.1,0.3-0.2,0.9-0.2,1.5c0,0.8,0.1,1.3,0.2,1.7c0.1,0.4,0.4,0.6,0.7,0.6c0.4,0,0.6-0.2,0.8-0.7c0.1-0.3,0.2-0.9,0.2-1.6 c0-0.8-0.1-1.3-0.2-1.7C437.1,214,436.8,213.8,436.5,213.8z" /> </g> </g> </svg> and here is my Javascript $(document).ready(function () { //graph svg animation var shapes = $("line, circle, path") , tl = new TimelineMax(); tl.from(shapes, 2, { drawSVG: 0 , delay: 0.5 }) }); I would like the lines to come in second to last, and the numbers to come in very last. I have tried to create a pen for this project -> but I don't think there is a CDN for drawsvg http://codepen.io/erayner/pen/GWMGLq Any help is greatly appreciated.

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 });

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 am trying to create an animation using GSAP and ScrollMagic. The first codepen includes the desired animation. I am trying to trigger this at various parts through the animation. http://codepen.io/c308marketing/pen/RKXJQE The second codepen is the controller I am trying to build to accomplish this. What am I doing wrong? http://codepen.io/c308marketing/pen/WRVyzv Also, there is a black box that is covering the text that fades in…not sure where that is coming from either. Any help would be greatly appreciated.

render path/circle/rect in svg structure oneByOne or sync or delayed https://camo.githubusercontent.com/f43cf260e6ba5badcb4fb05f99270ea6cd1c539f/68747470733a2f2f7261772e6769746875622e636f6d2f6d617877656c6c69746f2f76697675732f6d61737465722f6173736574732f6f6e6542794f6e652e706e67[] here is the example http://maxwellito.github.io/drafts/vivus-issue-85/ i am compare vivus and greensock , it same vivus (https://github.com/maxwellito/vivus) has more control on animation timeline I am a greensock newbee, i have no idea does the gsap timeline api can control path in svg