Leaderboard

Hi @dgmldr, Please have a look to your CSS .slds-notification { position: relative; width: 20rem; border: 1px solid #ecebea; border-radius: .25rem; box-shadow: 0 2px 3px 0 rgba(0,0,0,.2); transition-duration: .4s; transition-timing-function: ease-in-out; transition-property: margin,max-height,opacity,top; If you try ... .slds-notification { position: relative; width: 20rem; border: 1px solid #ecebea; border-radius: .25rem; box-shadow: 0 2px 3px 0 rgba(0,0,0,.2); /* transition-duration: .4s; */ /* transition-timing-function: ease-in-out; */ /* transition-property: margin,max-height,opacity,top; */ } you will have a clear responsibility for the job - done by GreenSock. Kind regards Mikel

Oh my lord, you guys are way too kind. This forum is honestly the best I've ever been on! Can't wait to be good enough to give back This example rocks man. I've just read your guides. Very informative, although I'm still struggling with why variable width strokes won't work. Could you shed some light on that? I'd love to be able to make the tight turns on the S & A even if it means spending hours in illustrator aha. If you still have it I'd love to see the project file so I can see how you've layered everything including the strokes, then I can compare it to your example and figure out what the different strokes look like and how I can recreate this for myself. Once again, thank you SO much, Smallio

If you want the SVG animation to look like the CSS animation, I think morphing may be a bit of overkill. Why not just animate the border radius attribute of the SVG? Just my two cents worth. Happy tweening.

Glad you got it sorted. Just to make sure you got all the details, you can use CustomEase to create an ease from those bezier values. Since you are already a member of these forums, you have access to CustomEase. Learn more about it here: https://greensock.com/customease On that page there is a video that shows exactly what is happening in the demo above with the custom cubic-bezier values. Watch at 9:47

That's not really a hack. That would be the way to actually mimic the movement you are after because you will need two points to move away from the starting corner in order for the motion to be the same. Another alternative is to have a circle with four point and push the 'curve handles' so far away that they make it look like it is a square. I would recommend @Sahil's suggestion as it will give you more control - for example, it would make it easier to have a rectangle instead of a box.

Hi @Syniky, Welcome to the forums. That is because 3D transforms are not really supported on browsers. At least not yet. In order to have your doors rotate in the Y axis, you will have to separate them into DOM objects. That way you will get the rotation as you expect.

Hi @Sahil, Great idea ... And this is my fork: How does a camel come through the eye of a needle ? ... or something like that. Mikel

How about this? The rectangle has very slight curve, so path morphs according to those extra anchor points. I am curious about correct approach as well but this might be the solution.

Hi @suresh_vs, Used InkScape to rotate the circle. And optimized the SVG with SVGOMG - great tool to keep svg code clean. For the 2. square I have no idea. But look at this topic. Trial and error ... and maybe the solution. Happy testing ... Mikel

Hi @suresh_vs, Welcome to the GreenSock Forum. If you turn the circle by 45 degrees, it looks better. Did it in SVG. Points of the square and the circle are aligned. Happy morphing ... Mikel

Nevermind i was confused and find happiness in custom easing (https://greensock.com/docs/Easing). Topic close

Currently you can only have a single width on a SVG stroke. Variable widths may be coming in the SVG 2.0 (or later) spec, but for now you're stuck with a single width. You can create an open path in AI with a variable width stroke using the width tool, but as soon as you export it to SVG you'll get a closed path. Here's an example of an open path with a 10px stroke and a variable width stroke (which is actually a closed path) being revealed with a mask. You can certainly attempt to add points and pull Bezier handles around for hours, but even the most perfect open path curve will eventually overlap itself if you make the stroke too wide. Here's an open curve with three stroke-width versions (2, 24, and 48). You can see the first one is a nice curve, but as that stroke gets wider, it gets really ugly. As I mentioned, you can add points and adjust handles but accurately matching an existing font with an open path can be tricky. Choose your font wisely. Of course, you can always just use a mask for the reveal too. Hopefully that helps. Happy tweening.

Hi @smallio If it were my project, I’d probably use masks as @mikel suggested. That route will most likely give you the least number of headaches. That being said, you can recreate fonts with consistent stroke widths. Here’s a quick example of the word ‘social’ from your demo. You can see that the ‘s’ and the ‘a’ aren’t exact matches, but they’re close. The problem with the ‘s’ is the tight turns. When you have a closed path, you can easily make the curves, but now we have an open path with a stroke running down the middle. The turns look less smooth as the stroke gets wider. The ‘a’ has a variable width stroke on the curved portion which won’t work so I just made it consistent all the way around. When you have projects like this, you can usually make it work by recreating the font, but you may have to make some artistic choices that will make the font appear slightly different than the original. If you’re using AI, the pencil and/or curvature tools are great for this type of work. I wrote some posts on CodePen about recreating fonts and the handwriting effect. You may find some useful info in them. https://codepen.io/PointC/post/animated-handwriting-effect-part-1 https://codepen.io/PointC/post/animated-handwriting-effect-part-2 Here’s the final demo from those posts. Hopefully that helps. Happy tweening.

Ah, that's just a scope issue. In other words, in your first example, play() is being called directly on "child", but in your second example there is no scope declared. That's just how JavaScript works - it's unrelated to GSAP. To correct your second call, you can define the scope like: parent.call(child.play, [0], child); Does that clear things up?

Hi @PointC, It just needs experts - sorry, a SuperHero - for simple solutions. As already the famous Sepp Herberger said: "The round thing has to go into the rectangular thing ..." It's that easy with football, too.

This is a great way to push forward the acquisition of GSAP as the standard for banner animation. I have created a tool that pretty much use for layout:

Haha.. it's all good ?

This Pendantinc Police here is horrid.

Hi anotheruser, Thanks for asking. Our position hasn't yet changed as we are still super busy with the demands of the JS world.

Use animate dom_overlay_container div for TextPlugin, ScrambleTextPlugin, SplitText... example of code in actions var txt1 = document.createElement("p"); var node1 = document.createTextNode("This is the old text"); txt1.appendChild(node1); txt1.setAttribute("id", "p1"); var element = document.getElementById("dom_overlay_container"); element.appendChild(txt1); TweenLite.to("#p1", 2, {text:"This is the new text"});

Hi @smallio, Exactly right, drawSVG only works with strokes. But "writing a special font with strokes" is almost impossible. @PointC has some examples in the forum that cover this topic. I quickly found this. The trick: "use drawSVG to animate the mask and reveal the logo" or a letter. That is still complicated for all letters ... Happy masking Mikel

Think of the tweenFromTo() stuff like instructions to move a needle on a record (music). It wouldn't make sense to write the code the way you did because you've got an overlap of 5 seconds where two hands are fighting for control of the needle's position, telling it to go to completely different places. So on a single tick, one tween says "render that timeline at 0.25 seconds" and immediately after that (literally on the same tick), the other one says "render that timeline at 5.25 seconds". Whichever one runs last would win, but it's just a bad idea to structure things like that (in my opinion). See what I mean?

Hi @jimthornton, There are many ways to Rome and sometimes to a simpler solution. Here is just a playing field as a suggestion: Happy circling by tweening ... Mikel

Hi @fencepencil, @Carl`s idea with the loop is perfect. Attention: the dots are manually sorted in the SVG! If this is done, the code line 3 (your pen) would be obsolete. Happy pointing ... Mikel

Hi and welcome to the GreenSock forums, Thanks for the demo. Very cool animation. Just a few little mistakes as to why the last fill:white wasn't working. Change .to("#letters", 0.5, {fill:"#FFF"}); //TO .to(".dot", 0.5, {attr:{fill:"white"}}); #letters is the group holding all the paths you are morphing to. You don't actually see the #letters group on screen, you see the #dots. You can't change the fill of the #dots group because each .dot has its own fill set inline So you need to target every element with a class of dot (".dot") Lastly, fill is as attribute not a CSS property so you actually have to pass that value into the AttrPlugin (included in TweenMax) .to(".dot", 0.5, {attr:{fill:"white"}}); Keep up the great work.

Hello @multivac Is this what you were after? .. i used a staggerFromTo() without using an onUpdate I think the issue was that the browser did not know what the starting filter value was, since by default CSS filter is none. That is why you saw a an abrupt step with no transition from blur to no blur. It was acting like an on / off switch with no interpolation of values. I also added a slight rotation 0.01 and used autoAlpha instead of opacity to make it animate smoother. As well as adding some needed CSS properties to help with cross browser rendering bugs. So now you should see it animate from blur to no blur: JS: var h1 = document.querySelector( "h1" ); var split = new SplitText( h1, { type: "chars" } ); var timeline = new TimelineMax(); // change visibility for initial load TweenMax.set("h1", { visibility:"visible" }); // use satggerFromTo() timeline.staggerFromTo( split.chars, 0.7, { autoAlpha: 0, webKitFilter: "blur(5px)", filter: "blur(5px)", x: 80, rotation: 0.01 },{ autoAlpha: 1, webKitFilter: "blur(0px)", filter: "blur(0px)", x: 0, rotation: 0.01 }, 0.1 ); CSS: h1 { visibility:hidden; } h1 > div { -webkit-backface-visibility:hidden; backface-visibility:hidden; visibility:hidden; } Happy Tweening!

Variables aren't scoped in a for loop. https://stackoverflow.com/questions/790558/variable-scope-in-javascript-for-loop That's what the new let and const statements can be used for. So you can either use those (just be sure to use a transpiler like Babel to support older browsers). for(let i = 0; i < 6; i++ ){ ... function getOffsetValues(){ console.log(i); } } Or do everything inside a function. That's what your jQuery each loop is doing. for(var i = 0; i < 6; i++ ){ setChars(i); } function setChars(i) { ... function getOffsetValues() { console.log(i); } }

Hi @Awmat, step by step - looks good. 1. Use 'visibility:hidden' in CSS. 2. Watch 'Animate along on SVG path' (here). 3. In the DOCS you find: So you could even animate a dash from one end of the path to the other, never changing size, like TweenLite.fromTo("#path", 1, {drawSVG:"0 5%"}, {drawSVG:"95% 100%"}) Here some modifications: Happy tweening ... Mikel

Hi @simonb, Welcome to the forums! There's going to be no end to talented individuals and agency teams here. You're in for a ride I'm a freelancer myself, based in the UK. Here's some work from last year - you might notice a theme with these as this one client kept me busy for most of the year https://flowers.penhaligons.com/ http://www.penhaligonstimes.co.uk/ http://mysterymansion.penhaligons.com/ - (notice: has music)

Hi @jamesg It's always helpful if you can put what you have in a simple demo. It doesn't have to be pretty, or even working. Just something we can experiment with. For this, I would probably morph the lips as a mask or clip path for a group element (<g>). In that group, I would put a darkblue rectangle to give it a background color, and for the mouth, well it probably doesn't need to be morphed. The mouth shape could probably be left as is, but move it down on the y-axis so it's not visible in the starting state. You could also scale it down a bit if needed. And to animate it, just morph the mask or clip path while moving the mouth up. But that's just one way to do it. There is no correct way. And animating masks and clip paths have their own little quirks, so you should test to see what works best. If you haven't already, check out the SVG Gotchas thread. It has some good tips on working with masks and clip paths.

You're placing a bunch of unnecessary restrictions on your animation. And I see transforms in your html that do the same thing as xPercent/yPercent. Transform origin does not affect x and y. If you want to move something from the center instead of the top left corner, then offset your points half the width and height of the object your animating.

The trigger property might be what you're looking for.

There are a ton of browser inconsistencies and "gotchas" when animating SVG with CSS. For example, transform-origin issues: https://css-tricks.com/svg-animation-on-css-transforms/. There are many, many more that GSAP solves under the hood. Another example, IE and Firefox both have bugs that affect progressively drawing SVG lines, measuring path length, and Safari can leave rendering artifacts in certain cases. I'm curious: why did your client disallow JS for the animations? I'm biased of course, but I think it's a pretty bad tradeoff to dump JS for buggy (and headache-prone, verbose) CSS. Are they concerned about security or something?

Hi @dgu, If you update all necessary variables and functions after each new point, it should work - @OSUblakecould say something concrete. Here only roughly matched Best regards Mikel

Sorry, I don't really understand the effect you want. You have like 800 lines of css and I don't understand what the nav should do when you apply the mobile class. It looks to me that its being hidden of screen somewhere. In cases like this the simpler you can make the demo the better. I think in general what you need to do is create the animations that you need when the resize event meets the condition you are testing for, not before. I think you were getting at this with your question. You can't create an animation on page load for something with class of mobile BEFORE that class has been applied. you can do something like this function resize() { if ($window.width() < 768) { mainNav.addClass("mobile"); TweenLite.to("body", 1, {backgroundColor:"white"}) return; } } Or instead of creating a tween or timeline in the resize() function you can call another function that creates the animation function resize() { if ($window.width() < 768) { mainNav.addClass("mobile"); animateNewThings(); return; } } function animateNewThings() { TweenLite.to("body", 1, {backgroundColor:"white"}) TweenLite.to(".mobile", 1, {color:"green}) } If you need more help please describe more of what you need to happen. Thx.

Nah, GSAP typically just needs to be loaded once on the web page. In most cases, people inline their SVG (embed it in the HTML) which ensures that it can easily tap into GSAP without any security issues, and there are fewer server requests (faster). Are you trying to embed JS inside each SVG file and loading it into <img> nodes or something? I believe it's possible to load JS into an SVG with a link too (similar to a <script> tag in HTML). It'd help if you had a demo or something we could peek at. But no, it's very unlikely that you'd need to embed TweenMax in a bunch of SVG files. I can't imagine a scenario that'd require that.

Hi @hisco, Here's a little playing around - because I like coffee and enjoying the slowness ... Enjoy slow food animation ... Mikel

@Lovestoned Yes technically you can use ThrowProps with Draggable. But the way it is setup now the drag only allows it to animate a certain distance. You would need to add the GSAP ThrowPropsPlugin (which is a Club GreenSock Membership plugin). Then you will need to add the GSAP ThrowPropsPlugin JS script and then add throwProps: true to the Draggable.create() parameters. But again you would need to change the functions of next and previous to go past their predefined distance of just moving to the next or prev slide. GreenSock allows you to use the GSAP ThrowPropsPlugin JS on codepen so you can play and test with it. But keep in mind that the GSAP ThrowPropsPlugin will only work on codepen and not outside of it.

Hi @jSwtch, Please take a look at this code: Also try a separate 'pulse' function for the startup animation. And - as an alternative: bind a hover function for the start animation to a container or maybe to window (?). Happy looping ... Mikel

Thanks for the demo. It seems you were passing bad strings into document.getElementById() You were passing in something like "#bird" as the SectionC param in sceneHelper(sectionA, sectionB, sectionC). when you called the function sceneHelper('#section1', '#owl', '#bird'); Inside of sceneHelper() you were doing var x = document.getElementById(sectionC + i).style.fill and the sectionC + i expression was evaluating as "#bird1" or "#bird2" etc. You can't pass the # into document.getElementById(), you just want to use "bird", "horse", "lion" I've probably made the same mistake a hundred times. Without changing a bunch of code just use: var x = document.querySelector(sectionC + i).style.fill

Hi and welcome to the GreenSock forums, A CDN is a content delivery network: https://www.cloudflare.com/learning/cdn/what-is-a-cdn/ CDN's provide quick access to commonly used JavaScript files for people all over the world. All of the public GSAP files are hosted on cloudfare's cdn: https://cdnjs.com/libraries/gsap Although you can load any file individually, most people just load TweenMax which includes the most commonly used components. The CDN link for TweenMax is <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> You just put that in your html file before any scripts you write that need any GSAP tools in order to run like //load TweenMax for cloudfare CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> //write your own code that uses GSAP <script> TweenLite.to("#myDiv", 1, {x:100}); </script> One of the best ways for beginners to learn is to look at some basic demos. We have a bunch on CodePen https://codepen.io/collection/ifybJ/ Click on any of those demos and you will see all the html, css and javascript used to make it run. In the bottom of every Pen is the option to export a zip. You will then get a set of local files you can run. Feel free to download and investigate as many as you like. A typical html file will look like: <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Basic Tween</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="demo"> <div id="logo"></div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script> <!-- your custom javascript file --> <script src="js/index.js"></script> </body> </html> As a side note, I would strongly recommend learning the basics of GSAP before getting too deep into ScrollMagic. Let us know if you have any more questions.

Hi @bparticle, I looked at the individual parts of the SVG. https://codepen.io/mikeK/pen/5640f95d0efe846102b806e64b98a5dc/ It is difficult for me to imagine what intermediate levels or which final "picture" should arise. One way to control morphing is if both paths contain the same number of anchor points. Best regards Mikel

Thanks for the demo. I reduced down so I could just see what #step1 looked like(added stroke and fill). The findShapeIndex tool requires a closed path: https://greensock.com/docs/Plugins/MorphSVGPlugin it appears #step1 is not closed and you have a path / stroke kind of floating around on its own in the demo below #step1 has a green fill. For the best results use a closed path. Also it looked like you edited previous posts and changed the demo while I was trying to help. Please just reply to the thread with updated (new) demos. Your updated demos look very different then the one I initially forked. If you have further questions please reply and clarify. thanks.

LoveStoned, I think you can just change the order things appear in the html <div id="container"> <div class="slide">1</div> <div class="slide">6</div> <div class="slide">5</div> <div class="slide">4</div> <div class="slide">3</div> <div class="slide">2</div> </div> <div class="controls"> <div id="next">Prev</div> <div id="prev">Next</div> </div> <span id="info"></div> You can then update your ID's on your buttons ("next" and "prev") and tweak the js as needed so it makes sense.

You need to think about what the loop is doing. It's running a hit test on EVERY element, so adding a class will only remain if the last hit test you run is true. If you drag something over the first element, you'll see that your code works. The loop is running backwards, so the first element is the last one you hit test. To fix the problem, you need to stop running the loop on the first hit test that is true. You can stop a loop by using a break statement. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break

Hi and welcome to the GreenSock forums, Thanks for the demo. Stuff like this where you want a bunch of different transitions on the same elements isn't always as straightforward as you might think. It can get kind of messy taking existing timelines and then trying to put them in different timelines at different times especially if you are reversing them. Once you put user interaction into the mix and let people jump to any state at any time it just gets complicated. For situations like this its probably better to create your animations on the fly. In basic terms you can create functions that create animations for animating certain elements out, and certain elements in. So you might call a function that creates your "AnimateLoadingOut" timeline and then call a function that creates your AnimateErrorIn timeline. You can glue the timelines that those functions create together into a parent timeline. Again, it isn't exactly easy to do or explain quickly. The article below is packed with information on the technique of using functions to create timelines. https://css-tricks.com/writing-smarter-animation-code/

No you will have to use two separate timelines for reverse and play. If your animation is too complex, you can create master timelines and add timelines to it using functions. Following are tutorials for complex timelines

Lookin' good. You have a great eye for animation.

Jamie, nice job on the even / odd array split. slick. Celli, I think this should set you up: http://codepen.io/GreenSock/pen/urwev

Sure, that should be entirely possible although I must admit I've never personally tried it. I believe several other people have done this successfully - the key is to simply declare a "window" object just so that it doesn't throw an error when TweenLite references "window" (it only does so a few times). Like var window = this; //or perhaps {} Obviously CSSPlugin wouldn't work very well outside of a browser, but I doubt you'd even try using that. The animation platform itself was built so that it is extremely flexible and can animate any numeric property of any JavaScript object (even generics and even function-based getters/setters), so I bet you'd find it to be a very nice fit for what you're doing, especially because the timeline classes can be a very powerful way to modularize your animation workflow. Also note that we're looking into the possibility of reworking things in a Browserify manner to make it even easier to do exactly what you're talking about (no promises yet - we're researching it now but our goal is to make it more module-friendly).