Leaderboard

An example of triggering animations with the Intersection Observer API. Notice how the handler only toggles the playback state of an animation. if (entry.isIntersecting) { // play animation } else { // pause animation } Your handler is adding the same animations to an already existing timeline, so it's getting longer and longer every time entry.isIntersecting is true. So maybe something like this. inView(entry) { if (entry.isIntersecting) { if (!this.state.firstInview){ TweenMax.to(this.sun, 4, {opacity: 1}) this.setState({firstInview: true}) } this.tl.play() } else { this.tl.pause(); } } componentDidMount() { TweenMax.set(this.sun, {opacity: 0}); this.tl = new TimelineMax({ yoyo: true, repeat: -1, paused: true }) .to('.sun-flare--1a', 1, { x:50}) .to('.sun-flare--2a', 1, { y:50, onComplete: () => console.log('TL-1+2 completed') }, 0) .to('.sun-flare--3a', 3.5, { y: 150, onComplete: () => console.log('TL-3 completed') }); } And your click handler isn't working because of the parentheses. That will immediately execute the function. // Bad <svg onClick = {this.clickHander()}> // Good <svg onClick = {this.clickHander}>

Hey gone3d, Welcome to the forums! The ticker is a separate object, not connected to the tween itself, if you want to stop it from firing, all you have to do is remove the event listener. From the docs: //add listener TweenLite.ticker.addEventListener("tick", myFunction); function myFunction(event) { //executes on every tick after the core engine updates } //to remove the listener later... TweenLite.ticker.removeEventListener("tick", myFunction); Side note: I know you got the code from this thread, but it's always best to start your own thread for questions that are not related to the original one. It also makes it easier for others who might have the same question find what you have asked. Happy Tweening!

Probably a displacement map. Here's a good thread in which @OSUblake has a cool shader example. If you search the forum (or Google) for canvas, Pixi or displacement maps, you'll find some cool stuff. Happy tweening.

Hi @Blake The morph plugin wasn't loading and you had a really old version of TweenMax. You'd also want to align the #plane group to the path. var motionPath = MorphSVGPlugin.pathDataToBezier("#dotted-line-path", {align:"#plane"}); Hopefully that helps. Happy tweening.

As Blake mentions, when creating timelines in React, always use the componentDidMount hook, because that is run only once in the component's lifecycle, thus creating the animation only once and after all the elements have been added to the DOM and the component has been rendered. It seems to work as intended with the changes Blake pointed out: https://stackblitz.com/edit/react-timeline-pause-flow?file=Sun.js Also there is this sample from the GSAP-React guide: https://stackblitz.com/edit/gsap-react-timeline-sequence Happy Tweening!!

Perhaps it would be appropriate to hire an expert to help you out. Or analyze the source code to see what they did? Good luck with the project.

PS Check out my thread on circles along a path using stroke-dasharray. It's easier than creating all those individual circles. Happy tweening.

Close but not quite. What's different from what you wrote to the bellow? function doCoolStuff() { if (toggle === 'closed') { anim = new TimelineMax(); anim.to(targets[this.index], 1, { y: -50 }); } }

You could tween it back to the original color when you hover out or use clearProps. $("button").each(function() { $(this).hover( function() { TweenMax.to(this, 0, { backgroundColor: "red", ease: Power1.easeOut }); }, function() { TweenMax.to(this, 0, { color: "black", ease: Power1.easeOut }); TweenMax.set(this, { clearProps: "backgroundColor" }); } ); }); Happy tweening.

Hi, For all Banksy fans here the version a la GreenSock. It's a fork of a pen by Lee Martin, who reacted super fast. I like the art of Banksy. But I have not taken his original work. Otherwise this pen would definitely be hacked. Have fun ... Mikel

Hi and welcome to the GreenSock forums. The issue is that you are using a timeline which is active. When you hover the the circle it turns into an elephant. The timeline starts and the it keeps running. Then you move the pointer out of the elephant shape. At that point you're adding another instance to the timeline, 0.1 seconds after the end of the last instance, which is the circle morphing into an elephant, but at that moment the timeline's playhead is passed that point so you don't see the elephant going back to a circle. I would recommend you using a single TweenLite instance and then the play and reverse methods. Also if you want to speed the reverse process, you can use https://greensock.com/docs/TweenLite/timeScale() as well. This code seems to do what you're looking for: var elephant = $("#elephant"); var circle = $("#circle"); var t = TweenLite.to(circle, 1, { morphSVG: "#elephant", paused: true }); function toElephant() { // timescale 1 returns the tween to it's original speed t.timeScale(1).play(); } function toCircle() { // timescale 3 makes the tween 3 times faster t.timeScale(3).reverse(); } $("#circle").hover( function() { toElephant(); }, function() { toCircle(); } ); Happy Tweening!!

Hey Dave, I've been meaning to check in with you, and what you're working on. Do you think you can make a demo so we can get a better understanding of what's going on? I'm thinking that you'll need 3 separate animations, and/or maybe a media query watcher to create different timelines based on the size. For triggering viewport animations, I find using the Intersection Observer API to be pretty good. There's also a polyfill.

That does "technically" work because we are assigning a new value that isn't "closed", but I was looking for: function doCoolStuff() { if (toggle === "closed") { toggle = "open"; anim = new TimelineMax(); anim.to(targets[this.index], 1, { y: -50 }); } } Again, I'm using open/closed because your image covers are either open or closed. Okay, we can now click to create a timeline called anim and additional clicks are ignored. We're halfway there. Now, I already have a listener on the back button that calls the reverseAnim function. We need to add some code there that will reverse the anim timeline. function reverseAnim() { // how can we reverse the anim timeline? }

We don't really need an else in this situation. We want to prevent additional clicks/timelines once we have an active timeline, right? If the toggle variable is not "closed" nothing will fire, right? So we need to change that variable. I'll give you another hint. function doCoolStuff() { if (toggle === "closed") { // what can we add here to prevent additional timelines? toggle = // we need to assign a new value to toggle anim = new TimelineMax(); anim.to(targets[this.index], 1, { y: -50 }); } } I'd also note there are dozens of ways to make all this happen. I'm trying to lead you down one specific path towards an easy solution because you said you were completely lost. Once we have this done, you should be able to modify it any way you like. This is step 2. There are only 4 steps to a working demo.

Hi @Raydoan. Welcome to the forums. Unfortunately, we just don't have the resources to analyze a live site and then tell you exactly how to reproduce it on your own. That's a big task. If you have a specific question about GSAP or its API, we'd be happy to help. Typically you will get the best results here if you post a reduced test case as a codepen example so that we can see what you're doing and troubleshoot accordingly. Happy tweening!

Just to simplify, all I'd like you to do at this point is this: // wrap these two lines in some logic so they only fire if the toggle variable is "closed" anim = new TimelineMax(); anim.to(targets[this.index], 1, { y: -50 }); There are only a few steps to the complete solution you need for your project and this is step one. Going slowly will help you understand everything as we go.

Yep, I think that was the rant I saw that made me think that. Also, I have seen Paul Lewis video when it came out. But, but, but, isn't he a Google employee? He's part of the conspiracy. HAVEN'T YOU DONE SOME WORK FOR GOOGLE?!?!?!?!? You're one of them! SHOCK! HORROR! Bet you're hacking into my machine now to erase me and put a bot in my place! ...and off we go hijacking another perfectly normal thread...

There is blog post saying netlify supports gitlab.

Really? How strange. Do you actually use a class named "circles"? It doesn't appear to be the case. **The dangers of copy/paste coding** Always, always, always, young grasshopper, type your code.

I'm not sure I follow the question. It kinda sounds like you may want to pin the image carousel until the line gets to it? But I'm really not sure I understand the desired outcome here. Could you be more specific about the desired behavior and how GSAP plays a role in it? Thanks and happy tweening.

You would put that in the timeline vars object. For now, lets just put that in a separate function. anim = new TimelineMax({ onReverseComplete: onReverseComplete }); Now, in that function, how can we allow new clicks/timelines? function onReverseComplete() { // how can we allow new clicks/timelines? }

Actually my idea was to go with React, but considering the size and how the app was constructed, Vue turned out to be a better solution, just that. It is a German thing actually: Jawohl!!! Maybe you should use React instead Kidding aside, working with Vue has been very fun and a great learning experience, it is in fact a great library.

That'll teach you. And where are those teams? I look left, right and center for Vue contracts and all I see is React Must be a 'Murica thing.

Indeed. Haven't used them a lot though. I'm far more familiar with the specifics that each library uses to create reusable components. Indeed it would be awesome to create a single component and use it in different set-ups but right now everyone seems to be on board with opinionated software. Can you imagine a world without opinionated software?: https://imgur.com/ywOpPB7 My original comment had an intended pun. You posted a link where they show tests and support for almost every known library and framework for web components, hence: "That's your answer to everything". Obviously that sounded funny only in my brain. I'll restrain myself in the future about those comments. @Dipscom Funny thing one: I made a component using ES6 modules and classes a few months ago that now needed to be transformed to a Vue component. Originally the idea was to transform the whole app to a React app, but the development team opted for Vue at the end. Funny thing two: I got a taste of my own medicine by @OSUblake, at the end you harvest what you seed...

okay, so now we only get a new timeline if the toggle variable is "closed". However, nothing has changed from the original demo because the value of that variable is still "closed". We can still click all three buttons and a new timeline is created. We need to add something to that logic when we click a button to change the value of the toggle variable. function doCoolStuff() { if (toggle === "closed") { // what can we add here to prevent additional timelines? anim = new TimelineMax(); anim.to(targets[this.index], 1, { y: -50 }); } }

I'm so busted! But I've been talking about custom elements/web components long before I became a conspirator. Like here. Maybe, but I think @Rodrigo already hit on the main point. Use shared state to control animations in other components. For Vue, vuex is a popular way to manage state. https://vuex.vuejs.org/

I'm pretty sure that code won't work on most phones. Phones typically don't have a mouse wheel. And mousewheel and DOMMouseScroll are non-standard events. You should probably use wheel instead. Of course that still won't work for mobile.

It might not be obvious, but my demo is an example of a shared state animation. It's not the same element being animated. This guy seems to think so. https://twitter.com/mjackson/status/1050597629741023232 Use the platform. Do you even know what web components are? I'm honestly asking because it seems that there is a lot of incorrect information out there.

@flowen There are components you're importing into the sample that are not present in the folder structure of your sample: import Title from './Title' import Description from './Description' import NameDrawn from './NameDrawn' import Sun from './Sun' Stackblitz is returning an error during compiling: Import error, can't find files: ./Title ./Description ./NameDrawn ./Sun Please add those components and also the logs in order to see what's happening.

I re-wrote the demo. I would say avoid assigning class to keep track of active elements, it gets messy and confusing real quick.

Hi guys, Just a little help. Guaranteed letter by letter hand coded by an old grasshopper. Happy scrolling ... Mikel

@GreenSock Ah apologies! Never thought of this. I removed the link in the first topic and will try to move the public repo (not sure if I can though, netlify seems to only work with github and not with bitbucket)

Hi @svyar Your coordinates were out of bounds, but it looks like you were able to figure it out. Not sure what type of effect you were going for, but you might be able to learn from this.

Yep, here's an effect using a uniform wiggle: You can easily tweak things like timing, number of wiggles, etc. Some other CustomWiggle demos that might be useful: If you don't want to use CustomWiggle, you could loop through some random values oscillating back and forth, but that's a bit more cumbersome. Is that what you're looking for?

If I understand you correctly, that's actually quite purposeful but it's easy to change the behavior to what you want. It should be as simple as setting: CSSPlugin.defaultSkewType = "simple"; Or on a per-tween basis: TweenMax.to(... {skewType:"simple", skewY:30}); From the docs: Does that resolve things?

You can't say it doesn't work if there isn't any animation code. Try making the animation work without Vue first. If you need help with canvas, check out this post, and everything it links to. https://greensock.com/forums/topic/18873-animating-canvas-fillstyle-with-gsap/?tab=comments#comment-87524 And I'm pretty sure you can make a canvas animation reactive. These examples use state. https://vuejs.org/v2/guide/transitioning-state.html

Hi @johncolumbo, Just like here ...? Happy scrolling ... Mikel

Hi @jesper.landberg, If I understand you correctly ... try using tlGrab.reverse() - by default it is playing in reverse from wherever the playhead currently is. Happy tweening ... Mikel

That wouldn't surprise me because Chrome and Safari don't work the same way. Safari doesn't seem to optimize a lot of stuff, as seen here. Safari is webkit, and Chrome is blink. Layout and paint can hurt performance, and Safari has to do a layout and paint for pretty much everything. Also, try adding will-change: transform; to your CSS. Just be aware that it can cause other issues, particularly if scale is involved. https://greensock.com/will-change

GSAP doesn't do any rendering, so it's probably not related to GSAP. Does it perform better if you reduce the size of the window? A retina display has A LOT of pixels to render. That's like 4k or 5k, and requires good hardware to run at a good framerate.

When you set the transform origin for an SVG element with GSAP, it should look like this when you inspect the style. element.style { transform-origin: 0px 0px 0px; } The transform origin on your .au site looks like this. element.style { transform-origin: 0px center 0px; } If I manually change the eyes to use transform-origin: 0px 0px 0px; it works correctly. I don't know why the transform-origin is incorrect, but that's the problem. Make sure you're using the same SVG and code between both sites. I noticed the code in your .au file didn't have the same number of lines as your .uk file.

Just a note of thanks to the GSAP community for helping me build this, it was a joy to work with GSAP in Angular 6, and couldn't have done it without you. http://dankemper.net

Do you mean like this?

Hi DD77 I've seen literally a dozen or more posts about this pen you forked from GrayGhost Visuals which is a just a basic tutorial on using ScrollMagic. Sahil has gone above and beyond the call of duty in trying to explain how to get certain things accomplished with GSAP. It is not the purpose of these forums to spend hours helping with each new requirement a user has on a project, especially those requiring complex logic and re-wiring of animations that have already been fed into ScrollMagic. I've read this thread a few times and I personally do not know enough about ScrollMagic to solve your issue. The reality is there are a lot of users who need our help (which we offer for free) and we have to do our best to help people with issues related directly to the GSAP API, anything beyond that is a bonus. I hope you continue to enjoy using GSAP and wish you good luck with your project.

This honestly feels like I am reading an email from client Can you please visit examples page on scrollmagic site? There are plenty of examples that show how different things can be done. Many times I just visit there and post my answers. I also had told you that you will need addIndicators plugin shows you indicator, without it it was just throwing errors in console. With scrollmagic's setTween method you can pass any tween or timeline to it, there is nothing more complex than that. So you can set up a TweenMax tween or timeline and it will animate it. Hope that helps?