PointC

All of your paths have the same class so you can target them in the tween like this. var tween_journey = new TimelineMax(); tween_journey.to(".cls-2", 1, { strokeDashoffset: 0, ease: Linear.easeNone }); Happy tweening.

You might want to take a look at these links: https://ihatetomatoes.net/scrollmagic-tutorials-for-complete-beginners/ https://ihatetomatoes.net/5-days-with-scrollmagic/ Happy tweening.

I'm not quite sure I understand what you need, but here's a starter with a pinned section and multiple panel wipes. You can add to the timeline between wipe transitions or you can add more pinned sections. Happy tweening.

Is this what you needed? 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.

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.

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.

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

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.

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

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.

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.

One way would be to play(0). Something like this: Happy tweening.

Sounds similar to what I did in this demo: You should be able to set up some triggers to animate the mask or change the color of the logo path(s) fill. The mask or clip-path route will probably be a bit better because during scrolling the logo could be straddling two sections of background colors and the mask could compensate for that. Happy tweening.

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

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.

Hi @jsciumi If I understand your question correctly, I think you'd want to split with chars and lines. Then add a class to the lines with an incremented number. That will make it easy to loop through each <ul> and create a pause between lines. Maybe something like this: Does that help? Happy tweening.

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.

Random drifting can often lead to really cool discoveries and designs. Neat demo @Sahil. ?

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.

I was actually able to see the problem in both Edge and FF. (Chrome was fine) Jack's fix seems to work properly in all browsers for me.

I'd definitely echo @Carl's advice about that. Bringing font-awesome icons into the project seems likely to over complicate things. Most of those icons are fairly simple. Just a few lines, polylines and circles will take care of most of them. You may want to take a look at this: https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368 Happy tweening.

It's funny you should mention this as I still have worries about code from time to time. When I make a demo, I think "If Blake sees this, he's gonna think I'm a total goof. " I think I'm getting to a place now where I'm satisfied with my results. I can't imagine I'll ever be at the skill level of @GreenSock or @OSUblake and I'm fine with that. If everything in my code works as I'd like and I'm not repeating myself too much, I call it a good day. @Robert Wildling I work alone too and that can be challenging. But that's one of the awesome things about being a member of the GreenSock forum. We have access to a community of talented people from across the world who are here to help when we need it. Happy tweening.