Leaderboard

As I understand it this could be a bit tricky or messy. The key to getting the scrollY of the window to effect the movement of the box is to use ThrowPropsPlugin.track() method to track the velocity of the scrolling. When the user is done scrolling you can create a tween of the box based on the velocity of the scrolling. Definitely study the ThrowPropsPlugin docs: https://greensock.com/docs/Plugins/ThrowPropsPlugin and the track() method: https://greensock.com/docs/Plugins/ThrowPropsPlugin/static.track() Here is a very rough implementation that will allow you to gently use a trackpad to move the red box. I suspect you will need to do some work to update the Draggable and prevent things from getting too crazy. Right now its very easy to throw the thing very far. Also if you grab the vertical scrollbar and move it nothing very good happens. Unfortunately this isn't the type of thing I can spend hours on working out all the kinks. Hopefully this is enough to at least spark some ideas about what is possible with the API

Hi @roogud, In itself, the execution of eighthday is a cool solution. Can also be implemented with a timeline. If there was not the problem 'quite jittery in Safari'. But to explain the reasons for safari problem or to present a solution is something for the experts. Kind regards Mikel

No you don't have to get club membership to use club plugins in Codepen projects. Support for codepen projects was added couple of months ago. Make sure your files are linked properly, if you are still facing problems then post a link to your project.

Welcome to the forum. In your scenario the tween duration is irrelevant as the whole timeline is hijacked by ScrollMagic. You could set each tween to 100 seconds and the result would be the same. The duration of 500% represents 5 times the window height. Where the tween duration is relevant is determining the percentage of the whole animation. In your case each tween is 1/3 of the total so each will complete over 33.33% (166% window scroll) of the ScrollMagic duration. If the first tweens were 0.5 and the third stayed at 1, then the outcome would be different. The first two would take 25% of the scroll and the last tween would take 50% of the scroll. The other consideration when performing tweens based on user scroll is to set the ease to Linear. You've already done that, but I thought I'd mention it. Make sense? Happy tweening.

Yes, a CSSRule tween can be part of a timeline. Happy tweening.

Hi @irfankissa Welcome to the forum. I think you could probably simplify things a bit here. You're creating a new timeline on each prev click, next click and mouseenter event. I would think one timeline (created outside of handlers) and 3 labels would be an easier approach. You could then prevent the mouseenter from pausing the timeline by using the isActive() method. https://greensock.com/docs/TimelineMax/isActive() For more info about labels: https://greensock.com/position-parameter It's difficult to offer assistance with a lot of pasted code and a live site. If you have other questions, could you please create a simplified demo? More info: There are also numerous threads in the forum about sliders and carousels. If you use the search feature, you'll find lots of great info and demos. Happy tweening.

Wait until you start nesting components... Mwahahahahahah!

Remove the hash character from your SVG selector and you'll be good to go: // bad Draggable.create('#svg'); // good Draggable.create('svg'); Happy tweening and dragging.

That's right! Thanks so much!!

It should be as simple as: myTimeline.kill(); TweenLite.killTweensOf(myTimeline); Does that resolve things for you?

That's a really cool site indeed. Unfortunately, we don't have the resources to provide free consulting services for dissecting a live site and teaching you how to build it from scratch. These forums are for GSAP-specific questions. If you're looking to hire some help, though, feel free to post in the "Jobs & Freelance" forum anytime. Happy tweening!

I should also note, the way you have this structured with the tween in the event handler, your tweens can get 'stuck' with rapid hovering. It's usually best to create a timeline and play()/reverse() it on mouse enter/leave. Happy tweening.

I don't know anything about the charming script you're using, but it looks like it isn't splitting your text into <span> tags. Here's a fork of your pen using SplitText. You can see that everything is working fine. SplitText makes this type of animation super easy and is loaded with great features. https://greensock.com/SplitText It is a Club plugin. More info: https://greensock.com/club Happy tweening.

You could just replace a child element and animate the container(s). Or you could write a function that creates the "tl" timeline again, but of course with the new element in place. Sorta like: var tl = animateBoxes(); function animateBoxes() { var newTL = new TimelineLite({onComplete:load}); newTL.to('.item',1,{x:300}); return newTL; } function load() { tl.pause(0).kill(); //...do whatever swapping/replacement here... tl = animateBoxes(); } Does that answer your question?

Thanks @PointC and @Shaun Gorneau !

In previous thread, @PointC was correct. The first frame is visible that's why you have to reduce it by one frame. There are no arrays involved, it is just you shifting background in multiply of frame width. You can add and remove the ticker event listener on mouse enter and leave.

You're welcome. Easy is my favorite type of question.

Oh! That was easy. Thanks so much.

Yep - you can control the timeline all you like. What @Shaun Gorneau has done is to create one big timeline with 200 children. You can now control the whole thing with tl.pause(), tl.resume(), tl.timeScale() etc... Make sense? Happy tweening.

If I understand correctly ... this should do the trick (you can play with timings).

Yep - you'll need two versions of the logo and mask out one at a time depending on your background color. I'm not sure how you'd trigger it based on the color of the background. (unless a background color change is part of the animation?) I was thinking about triggers using the y offset of various sections. Give them classes of .blackLogo and .whiteLogo for example. You'd then trigger the mask animation based on those sections page position. You could calculate it yourself or use a 3rd party plugin like ScrollMagic. You could also use the newer Intersection Observer. You can clip and mask regular DOM text too. I'm not the right person to ask about it though. The few times I've tried it I get frustrated with cross browser support and end up going back to a SVG mask or clip-path. Hopefully that helps. Happy tweening.

Hi @lselby, might be easier to do the tweens right inside the event handlers.

Year. That´s the best way to animate svg elements.

Hi Erayner and welcome to the GreenSock forums, In case it wasn't clear from the previous responses, yes, GSAP can be used in games. A game can of course be anything from a multiple choice quiz (click on the right answer) to something more involved like Space Invaders or Call of Duty. In a forum that focuses on tools that are used around the globe and require technical support it can be quite challenging sometimes to get through the language barrier and cut to the core of the issue. Just as we may struggle to understand a question, its understandable that personality traits and colloquialisms may get lost in the translation of our responses. A little grace and patience can go a long way on both sides. Just to help you better understand the range of games GSAP can be used in: @volcanoflash uses GSAP to build games into awesome banners: http://cdn2.worldoftanks.com/d_parhimovich/fbatwork/banners/wows/torpedoes/ and the folks from GoodBoy Digital use GSAP with Pixi.js to make full blown games like those found in the StarWars arcade: https://www.goodboydigital.com/case-study/star-wars-arcade (use username and password provided at that link) A search of the forums for "game" should hopefully bring up some other conversations like this one from earlier this month Also, GSAP is widely used in e-learning games where the drag and drop capabilities of Draggable are crucial to the experience. Just a few days ago, @OSUblake provided a remarkable demo in this thread: In general, when joining a new forum its probably best to start a new thread with a clear question than revive an old one to criticize a highly-decorated moderator. We're pretty easy-going around here though. I think you'll find that the help that Dipscom and the other moderators provide goes above and beyond what you will find in other forums if you give us the chance. If there is a question you have about using GSAP in games, please let us know. Happy Tweening!

I don't see anything odd here, but maybe I'm missing something obvious. What were you expecting to see change in _gsTransform that isn't changing? And what looked like a conflict between data-svg-origin vs css transform-origin? Remember that the cx/cy values would visually be affected by transforms. So, for example, if you start with cx/cy at 50,50 and then apply a scale of 0.5, those would appear to be at 25,25. Think of it like looking through a filter. So @Sahil is absolutely right about the solution being to alter the x/y transforms rather than the cx/cy attributes. Like this (for the reduced test case):

Is this what you needed? Happy tweening.

Hello @benoit Can you please give us more details on what exactly you are trying to do. Its confusing since in your code it keeps replacing a child with the same exact <div> element with the same class and the same text value. Any reason why your doing that? All that will do is cause some layout thrashing of constantly trying to animate something that is affecting layout calculations for the same element. Also keep in mind that when animating transforms you should set the CSS position to absolute so it doesn't cause a reflow of the layout in the document flow. Any additional information will be helpful in letting us know how we can help you Resources: https://www.impressivewebs.com/absolute-position-css/ https://www.w3.org/TR/css-position-3/#abs-pos

Thank you, Sahil! I cleared cache, now it's working perfectly!

Yes, sir. Same to you, mate

Hi @roogud, If the logo moves, it's easier. Here is my logo: Happy tweening ... Mikel

Got it: I forgot a the "return" in the TweenMax, the "()", when calling the function, and the initialisation of the timeline needs to be done in mounted() (not created(), because in the latter the DOM is not ready yet. "mounted()" fires after the transition hooks and therefore is at some point a problem... The last pen is updated. OK, done here. Thanks again for your patience and help! My next post: the working result Happy tweening!

Hi @weenieHutCEO, Welcome to GreenSock Forums. Good to hear that your problem is solved. Happy tweening ... Mikel

Hi @ivanguinea, That´s the point! Look at these comments: Kind regards Mikel

I'm wondering if @Dipscom should henceforth be known as The VueMaster? Of course, this should not be confused with the Classic View Master.

I'll have to agree with Carl here, it really seems to be excessive and a bit convoluted at the moment. Even though I have been following this adventure of yours for a little while now, I am still struggling to visualise what is the journey you are trying to implement. What you are doing wrong, in my view, is trying to have one parent component controlling all its children behaviour. What you really need to do is to have the children take responsability for their own behaviour and only report to the parent whenever they acomplish something. Vue already has all the behaviour you are trying to achieve baked into the framework, you're just not really tapping into it. Currently your components are nothing but HTML templates when they should be self-contained components with their own data and logic. You should stop what you are trying to do at the moment, go back to the Vue docs and digest the different patterns already designed by the framework. Because, what you are describing here is basic routing but you are not following Vue's pattern for routing and transitioning between routes. Here's a fork of your pen after dieting.

Hi Mikel, Thanks for pointing out the error with the demo in the docs for addLabel(). I fixed it. -- Glad to see that getLabelArray() is working for you. Although it is fine to use addPause() as you are. You might want to look into TimelineMax.tweenTo() and TimelineMax.tweenFromTo(), they let you tween the progress of a TimelineMax between any time or labels so you can do stuff like: charly.tweenTo("label2"); // tween to "label2" from current position charly.tweenFromTo("label1", "label2"); // tween from "label1" to "label2" furthermore you can use dynamic values like charly.tweenTo(charly.getLabelAfter()); charly.tweenTo(myLabelsArray[curentIndex++]);

Hi @benoit. I read your question several times and I still don't understand what exactly you're asking. Can you offer more details? How can we help?

Hi @redfawx Welcome to the forum and thanks for joining Club GreenSock. That's quite a bit of code and we just don't have the resources to review entire sites and offer general advice. I personally have no experience with Barba.js, but there are a few threads about it. Here are a couple. As for ScrollMagic, my advice would be to use the addIndicators() plugin while you're working to help you identify any problems. http://scrollmagic.io/docs/debug.addIndicators.html If you have specific GSAP problems or questions, we're happy help. Providing a demo will get you the best possible answers. More info: Happy tweening.

Hi @jimmymik Yes - you can have tweens fire within a pinned element via an offset. Here's an example that approximates the site you mentioned. I've used two different types of timelines. The sliding panels in the pinned section are based on user scroll. The small divs standing in for images in the lower right will play based on the actual duration of the tween. Does that make sense? Happy tweening.

Sure. You can animate it however you want. The benefit of ThrowPropsPlugin is that it'll deliver smooth momentum-based motion (based on how fast the user's pointer was moving when the release occurred).

Hm, can you share a reduced test case @cgorton? And by the way, you had a lowercase "d" incorrectly in that import statement. It's Physics2DPlugin. You had it right in your screen shot though. Are you using the latest version of everything? Oh, and if you're doing tree shaking with your bundler, it may be dropping the plugins because you're not referencing them anywhere. The solution is to reference it somehow, like in a variable declaration: var gsapPlugins = [Physics2DPlugin, ColorPropsPlugin]; Which also means you need to name your imports. Instead of simply "import 'gsap/Physics2DPlugin'" you'd need to do "import Physics2DPlugin from 'gsap/Physics2DPlugin'". Did you put the Physics2DPlugin.js file from "bonus-files-for-npm-users" into your node_modules/gsap folder?

What's the problem? Maybe set the position to absolute so it doesn't scale the whole screen width?

We totally highjacked this thread. Your demo reminds me of a voronoi diagram. https://codepen.io/search/pens?q=voronoi&amp;page=1&amp;order=popularity&amp;depth=everything&amp;show_forks=false

Sprite sheets are like that. Say you have a 3 frame sprite sheet and you're showing frame 1 on page load. You want to step to frame 3 so how many steps do you need to take? Not three. Just two will get you there. If you take three, you'll be off the end of the image. Does that make sense? Happy tweening.

Make sure you put the file from the bonus-files-for-npm-users folder. It shouldn't be looking for a relative module like ../TweenLite.js The correct file will look for gsap/TweenLite.js

If you're experiencing choppiness in your animation it's highly unlikely to be GSAP related. GSAP is a tweening engine that animates values over time. All the rendering is done by the browser. Odds are good that you're either animating something quite large or a bunch of elements at the same time. Browsers have limits and when SVGs starting bogging down, it may be time to look towards a canvas solution. There are many threads around the forum related to canvas if that's a route you want to consider. Happy tweening.

Hm, I don't really understand why certain browsers would load things more slowly but perhaps it's the parsing/rendering that takes them longer. It won't matter how you load the SVG (inline or as an img), I think you'll have exactly the same problem either way. Have you tried running your SVG through an optimizer? I'd definitely recommend loading SVG inline if at all possible because not only will it give you the most control and flexibility (GSAP can access all the nodes), but it's one less request from the server (improving latency). If you're still having trouble, I'd love to see a demo of your project. If there's any way you can provide a codepen or jsfiddle, it'd be super helpful for troubleshooting. I wonder if there's something else at play with IE/Edge that's unrelated to inline SVG.

How are you using @media to display the correct image? If you're using multiple <img> elements and just controlling display to show or hide then you'd need to create some conditional javascript to help select the right one for gsap based on screen size, or you could let gsap animate all the images, by just adding a common class to each for the selector. Less efficient computationally but if the animation isn't too intensive it's a simple solution. You may want to look at srcset for setting img src on a single element though I think it isn't universally supported without a pollyfill. https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ Another option would be to set the image as a background image then @media would allow you to control the image displayed in the css. In this case the element would have to be given size as it wouldn't take the sizing of the background image on it's own.

GreenShock /ɡrēn ˌSHäk/ noun: GreenShock psychological condition caused by prolonged exposure to the GreenSock Animation Platform, especially the use of Club GreenSock plugins. "I’m in GreenShock after witnessing Jack Doyle ‘whip up’ a new plugin and casually post it in the forum." synonyms: astonishment, surprise, stupefaction, incredulity, disbelief, speechlessness, awe, wonder, wonderment

I would like to welcome the two of you to the Shock 'n Awe Club - Which I am the president. We do a lot of skulking around and a lot of falling off our chairs by simply reading the posts here.