Leaderboard

Hi @elpeyotl, Or this from Jenkov (****). My workflow in short: Clean the source code of your svg images: svgomg New svg - starting with part '#total' Add the other parts (same viewbox) and group all their elements (<g> </ g>) The masks are hand coded - its easy if rectangles Important: The closer the color of the masking shape is to #ffffff (white), the more opaque the shape using the mask will be. Important: reference the mask ID attribute (e.g .: <g id = "total" mask = "url (#MaskTotal)">) Important: Series of parts. First #factory, then #total (transparent through the mask), ... last #oneStart (there is no z-index!) You can tween x, y, width, height ... of the masks. Orientate yourself by the dimensions of the viewBox = "0 0 232 232" #total: two separate masks half of the viewbox, the left is tweened by width, the rights by x-position Hope this helps you ... Mikel

It's not a bug. That's what happens when you interrupt a from animation. If the scale is at 0.1 when you interrupt the animation, it's going to animate the scale from 0 to 0.1. Try this. // You can set this when mounted TweenLite.set(".es-bubble", { transformOrigin: 'bottom bottom', }); TweenMax.staggerFromTo('.es-bubble', 1, { scale: 0, opacity: 0, }, { scale: 1, opacity: 1, ease: Elastic.easeOut, // force3D: true // doesn't work on SVG }, 0.1)

Many will say that it is impossible to learn GSAP without knowing a minimum of JS, but believe me I started my life as a developer (2016) by first tinkering with GSAP without knowing anything about HTML / CSS let alone JS. I've always been a designer and wanted to know how to make my sites, so I started using Adobe Muse (discontinued) that generates the site only using the visual mode, then I felt the need to use animated elements, I left for Adobe Edge Animate (discontinued too), but I still felt much lower than the animations of reference sites in Awwwards until I started to study how they did that animation and it was there that I came to the beloved GSAP, and believe me, I started to use GSAP without knowing anything about code, a video that helped me a lot it was the videos created by Petr Tichy (Link of videos), and also the moderators here of the forum because I asked a lot of questions since I did not understand anything of what I was doing hahahaha. Summary can be used however as Jack @GreenSock said, it is much harder, much better and more yummy when you know what you are doing. Good luck and remember: Learning is never too much. Ps .: Today I do everything in the manual hahahaha

Works fine for me.

@OSUblake that's perfect! Thank you very much! After Anime.js, where I needed to clean up manually situations like this, this feels like a breath of fresh air ? I guess I need to rephrase title? I meant a bug in my application code, not really GSAP

Hi @elpeyotl, Inline SVG means many lines in the HTML, but is great to work on and looks perfect: Happy masking and tweening ... Mikel

Another option is to simply create a tween, jump to time(0.00001) or something, and kill() it, like this:

Is this your problem? You're selecting all the buttons, so clicking stop will also run that function. $('button').click(function(){ });

Unless I'm missing something, I don't think it will do that. I just calculate it myself. Using the next control point will point it in the right direction. let bez = MorphSVGPlugin.pathDataToBezier(path); let rotation = Math.atan2(bez[1].y - bez[0].y, bez[1].x - bez[0].x) + "_rad"; TweenMax.set(plane,{x: bez[0].x, y: bez[0].y, rotation });

Wow, that warms my heart, @Noturnoo! I had no idea. Sounds like you've come a long way, sir. Well done. And now you're even helping others in these forums with your knowledge. that's great!

Hi @Halunke, Is this your situation ... Kind regards Mikel

I would love to do that. First lesson. SVG is not magic. Under the hood, the browser renders SVGs using canvas drawing commands. ? Viewing the Layers panel in Chrome's dev tools. It's not same as HTML5 canvas, but the API is really close.

Basically everything you load can be cached as long as it points to an actual location on a server i.e. a URL that doesn't have a "?" question mark in it. Yes, I've noticed that too. It usually happens after tagging somebody with the @ symbol. I usually just reload the page when it messes up. Everything you wrote should be saved, so you won't have to start over.

Hi Tiago, I made a pen simulating the transition of the site you mentioned. But first I think it is interesting to make some observations: 1) When you instantiate the Timeline and nest the Tweens one underneath the other, it is not necessary to put the name of the object every time, you can insert it only once. Like this: let tl = new TimelineMax() .to(...) .to(...) .to(...) // or let tl = new TimelineMax(); tl .to(...) .to(...) .to(...) 2) Since you are animating empty elements, I believe it is easier to animate using scale or xPercent, which will use transform () and have better perfomance than animating Left property 3) When you use Codepen you can insert the libraries directly into the Javascript Session, it becomes easier to manage the libs. Will take that to help you somehow. This pen:

Hi @peippo, I think what you're looking to do is trigger a separate timeline at the point in which your scroll-controlled timeline reaches a defined position/progress value. You can do so by breaking your "one-offs" into their own paused timelines and then .call() each wherever you like in the scroll-controlled timeline. Check out the CodePen below to see an example of that starting at line 60. Hope this helps!

I'm wondering if @OSUblake or @Sahil will be the first to launch: youmightnotneedsvg.com. Or maybe it'll be a joint effort: blakeandsahilsayyouwillgetbetterperformancefromcanvas.com

Hello @tri.truong and Welcome to the GreenSock Forum! I couldn't load your website link in Firefox on Windows 10. But GSAP does have a auto scroll plugin called ScrollToPlugin. https://greensock.com/docs/Plugins/ScrollToPlugin It allows you to do the following To scroll the window to a particular position To scroll to the element with the ID "#someID" To tween the content of a div To scroll when define an x (translateX) or y (translateY) value or both Some codepens of this: And this: There is also the GSAP tweenTo() method tweenTo() : https://greensock.com/docs/TimelineMax/tweenTo() .tweenTo( position:*, vars:Object ) Creates a linear tween that essentially scrubs the playhead to a particular time or label and then stops. If your still having issues please create a reduced codepen demo example so we can test your code live. Happy Tweening!

Hehe. Posted at the same time, but a loop like you did is probably better.

Yeah, it looks like you just have a weird path. The first control point is at the start (c0,0). M95.6,505c0,0 You could check for that condition like this. let p0 = bez[0]; let p1 = bez[1]; if (p0.x === p1.x && p0.y === p1.y) { p1 = bez[2]; } let rad = (Math.atan2(p1.y - p0.y, p1.x - p0.x)) * (180 / Math.PI);

Awesome, Blake! Thanks. My app offers an image rotation knob so I added conversion to percentage so I could add as rotation offset value. Here's a forked pen with that added in. You can set the rotationOffset and it'll add it. I set the rotation offset to -10 degrees.

Hi Blake, That´s the point. I'm getting really old ... Thank you - for the cool code too. Best regards Mikel

How can i achieve this animation with fixed height and width ? Canvas is loading for actual size of image's height and widht .

Thanks @Shaun Gorneau, that seems to be exactly what I need. Really appreciate the informative reply & example! ?

Hi @tri.truong, I do not understand your your question / your intention. Please create a CodePen to show what you mean and where it is stuck. Best regards Mikel

@mikel thank you. this is awsome. could you please explain me what you actualy did so i cant unterstand it? What was your workflow. I think i dont unterstand how to mask stuff in svg.

Yes, you need a server for AJAX to work.

I have a lot of experience with Flash back in the day. I would love to use Animate CC, unfortunately, I cannot justify the subscription until I have a steady amount of work coming in. I downloaded GWD yesterday and I'm gonna start playing with it.

hi @franklylate, and Welcome to the GreenSock Forum! You really don't need the add() method for what your doing. The add() method is best used when adding child tweens or timelines to a master timeline. In a loop would look like this // tweens in a for loop var count = 32; for (var i = 0; i < count; i++) { introaniTL.from("div.tilecontainer img:nth-child("+i+")", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18), }, "tg"); } Please take a look at this CSSTricks article by the Mighty @Carl on Writing Smarter Animation Code and using the add() method: https://css-tricks.com/writing-smarter-animation-code/ Also since your using from() tweens, you will find this tut helpful when using any from tween like from(), fromTo(), staggerFrom(), or staggerFromTo() : Happy Tweening!

@jesper.landberg Here is a thread that gets into some of this and may be a good starting place for you Happy tweening!

Hi @fencepencil How about something like this? Does that help? Happy tweening.

For the most part, GreenSock is designed for animations that have known start and end states. With a plinko game the movement of the ball is always changing based on: x velocity, y velocity, gravity, friction and angle of collision with other objects. These types of animations are better suited for a physics engine which is what matter.js is. Your plinko demo uses matter.js and from what I can tell it is the right tool for the job. https://github.com/liabru/matter-js

Hi @elpeyotl and welcome to the GreenSock Forum!~ Sorry your having issues. Based on your above codepen example i see that it is throwing a error on a script being loaded in, es.promise.js. Maybe its a codepen permissions issue? I didn't see any undefined variables in the codepen due to that script loading an error. Unhandled promise rejection FirebaseError: "Missing or insufficient permissions." es6.promise.js:97 08:50:50.811 Unhandled promise rejection FirebaseError: "Missing or insufficient permissions." e https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:412535 openStream https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:497518 f https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:496766 Ab https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1175938 dispatchEvent https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1203470 Ca https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1219538 Oa https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1217188 dd https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1185311 ed https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1184627 ad https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1184022 Sa https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1206393 nb https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1206350 Ab https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1175938 dispatchEvent https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1203470 ve https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1191916 jb https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1213667 Na https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1213639 es6.promise.js:97 To just output variable of getBoundingClientRect() width, then use this: var iconBoxRect = iconBox.getBoundingClientRect(); console.log(iconBoxRect.width); Happy Tweening

Hi @jeb, To illustrate, I've added an onComplete in the middle of your animation, and an onReverse in the Timeline, so that it fires when the scene is redone. Is that what you were trying to do?

You can ease into GSAP by using tools like Animate or Google Web Designer (GWD) for design work. I'm a hand-coder, but must admit that Animate is a much better than GWD since it's been around for far longer. Both products support let you insert GSAP code into them, which gives you the flexibility of designing with a GUI with the time-saving power of GSAP to tween everything. Once you get a hang of the GSAP syntax, you can move into pure HTML, CSS and JS.

We do have to keep our support focused on GSAP here. That being said, I made this example as an answer to another forum question and it may help you. It uses pins and triggers a new animation for each panel. Happy tweening.

You need to user horizontal scrolling for this, so you can trigger animations just as you do while vertical scrolling. Check out all other examples on that site, it has demo for almost everything. http://scrollmagic.io/examples/basic/going_horizontal.html If you don't want to use horizontal scrolling then you can use intersection observer API to trigger animations, https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Welcome to the forums, @Marlon! I used to be purely a designer and had absolutely no idea how to code anything. I was afraid of code for a long time. "Designers don't code and coders don't design", I thought. I was wrong. It took me a while to learn, but oh my gosh - it's so much fun! Once you get the hang of it, you'll be hooked. If you want to build banners, I'd HIGHLY recommend biting the bullet and digging in to learn HTML, CSS, and JavaScript. Be patient. It won't happen in a matter of weeks, but in the end you'll make yourself more marketable and you'll definitely make higher quality banners. I've heard from many designers who used to only build banners in graphical user interfaces and then they learned GSAP and they're like "oh my gosh, I'd NEVER want to go back...I can build things so much faster and more efficiently with GSAP." But yeah, at least a basic knowledge of HTML, CSS, and JavaScript are a must. In my opinion, it'd be very odd to try to use GSAP without knowing any JavaScript. That would be like learning to sing a Spanish song without knowing any Spanish whatsoever. I guess you could technically try to memorize the individual sounds and string them together, but it'd make things SOOO much easier if you actually knew what the words were saying and why they're put together that way. Don't fret - if you put in the time, it'll start to make a lot of sense and you'll probably fall in love. Plus it'll take your career to a different level. Happy tweening!

I believe that if you create an Example in Codepen with what you are trying to do, it will be easier to help you. Take a look at this: On making a TimelineMax between Tweens, I believe you can use the onComplete method inside your animations. And when you return to state 0, you can use onReverse. Look this: https://greensock.com/docs/TimelineMax But really if you have a Pen, it's easier to find a way to help you.

Hi @selfishound and Welcome to the GreenSock Forum! Sorry your having issues! To add to all the helpful advice given above When i look at your SVG markup in the HTML panel, it looks malformed, its missing the ending </svg> tag. You will notice after the </filter> ending tag there is no ending <svg> tag. Some browsers can render your code wrong when it is malformed, and cause some havoc when rendered. You should run your SVG code in an online svg optimizer to make sure its optimized and clean from uneeded whitespace. Online SVG Optimizer and Cleanup tool: https://jakearchibald.github.io/svgomg/ Also you might want to place your <filter> tag inside an SVG <defs> tag. SVG <defs> element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs <defs> <filter id="logo-f"> <feGaussianBlur id="logo-blur" in="SourceGraphic" stdDeviation="0"/> </filter> </defs> Here are some examples of animating SVG filter blur using GSAP: And this other one animating SVG filter blur: And then there is also animating CSS filter blur property examples: And this other using GSAP to animate CSS filter blur property with the GSAP SplitTextPlugin . Just my 2 cents, hope this helps

What you are trying to do is more suitable for canvas. It seems you are creating really long paths, which gets overwhelming for browser. It can be achieved using 2 canvas stacked on top of each other as layers. Draw your lines on bottom layer with lineCap set to round. And draw your circles on top layer. This way you won't be drawing too many paths unnecessarily.

You are using HTTP links on HTTPS site so they are getting blocked. Change your cdnjs urls to https. Also note that you are using 'latest' link that actually points to really old version of GSAP. Latest version is 2.0.2. https://cdnjs.com/libraries/gsap

@selfishound When it comes to animation/tweens/motion ... I would choose GSAP exclusively (I know, surprise there ?). What I mean is ... choose one, not two. Also, you're affecting the same property on the same element, which is why it will jump around. So ... I think it would be best to apply one tween to #logo, and the other (parallax) tween to a parent wrapper. That should give you better control. Here is a CodePen illustrating what I'm getting at.

That tutorial doesn't apply to what you are trying to do. You will need to morph multiple shapes, and you will need to animate fill color as well based on what are you morphing into. Take a look at demo by @PointC, This tutorial will help you write timelines using functions, https://css-tricks.com/writing-smarter-animation-code/

Please try svgOrigin: TweenLite.set('.home__links-container', {svgOrigin:'250 250'}); More info: https://greensock.com/gsap-1-16 Hopefully that helps. Happy tweening.

Hi @Racke1940, Welcome to the GreenSock Forum. Look at the GreenSock Learning Center. And try something on CodePen ... Here's a taste: Start happy tweening ... Mikel

Hm, I'm not aware of any complex tutorials that'd show you exactly how to recreate something like https://www.sartobikes.com, but I guess I'd just say to think of PIxi like the rendering layer, and GSAP is simply the tool that can animate anything you want. So it isn't as if you need to learn some secret ways of mashing the two technologies together - just build in Pixi and reach for GSAP whenever you want to animate any properties. If you're not familiar with Pixi yet, I'd definitely recommend spending some time getting up to speed. From what I understand (and I'm no expert), it's a very rich canvas-based platform. @OSUblake is our resident expert around here. And there is a GSAP PixiPlugin to make things easier. Good luck with your project! I'm sure that as you get up to speed with both GSAP and Pixi, you're gonna be really excited about what you can accomplish.

Hi @tri.truong, This is an option, a bit tricky Happy tweening ... Mikel

Hello fellow GreenSockers! I thought i would add my SVG gotcha since this type of thing comes up at least one time a day regarding SVG with GSAP. This is regarding animating SVG elements within an SVG <defs> tag. If you are trying to animate elements within an SVG <defs> element, then you should use the GSAP AttrPlugin. If your SVG elements are not within a SVG <defs>, <symbol>, or <mask> element .. than you should use the GSAP CSSPlugin like your already doing! Which is the default when tweening CSS properties in GSAP. GSAP is smart enough to know when to use what. But for attributes, wrap your attributes in the attr:{} object when using the GSAP AttrPlugin If you are animating SVG elements and they are nested inside a SVG <defs> element. then you need to animate those nested graphical elements with the GSAP AttrPlugin, instead of the GSAP CSSPlugin. The reason being is that Firefox will honor the SVG spec and will follow web standards whereas webkit browsers like Google Chrome and Apple Safari will allow certain non-standards and non-spec behavior. But will later remove that non-standards and non-spec behavior to line up with the spec, further confusing users / developers. SVG Graphics elements are considered the folllowing: <circle>, <ellipse>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <use> That is why i always debug and test in Firefox first knowing the expected behavior will line up with the spec, in this case the SVG spec. And then i debug webkit (Chrome and Safari), followed by debugging IE. Doing it that way I guarantee that HTML, DOM and SVG elements will behave according to the web standards, the spec, and cross browser. CSS is not directly rendered inside a SVG <defs> tag. That is why using the GSAP AttrPlugin works, since it animates the attribute values directly. Taken from SVG spec on the MDN (Mozilla Developer Network) website. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs <defs> SVG allows graphical objects to be defined for later reuse. It is recommended that, wherever possible, referenced elements be defined inside of a defs element. Defining these elements inside of a defs element promotes understandability of the SVG content and thus promotes accessibility. Graphical elements defined in a defs will not be directly rendered. You can use a <use> element to render those elements wherever you want on the viewport.The same goes for the nested elements within an SVG <symbol> element. So as rule of thumb when animating SVG, if the element your animating is within a SVG <defs> or <symbol> element , then please use the GSAP AttrPlugin. But if it is not nested inside a <defs> or <symbol> element, then you can use GSAP as usual, knowing that it will use the CSSPlugin instead. Hopefully this SVG gotcha can help other when using GSAP, especially for SVG. Happy Tweening