PointC

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.

CustomBounce is a perk of Club GreenSock membership (which I highly recommend): https://greensock.com/club You can always give it a try on CodePen: Happy tweening and bouncing.

onReverseStart() is pretty thoroughly discussed in these threads. Happy tweening.

hmmm... sorry to hear that you're getting frustrated. I can certainly understand how projects can get overwhelming. It's perhaps a good idea to take a step back and just get certain pieces and concepts working. I'll get to that in second. I took a quick look at your new version and the thing that jumped out immediately are the timelines on lines 62 and 118. You have those reversed and they shouldn't be set that way. Sometimes you want to reverse a timeline when you create it, but not in this case. You do have a complex project here. By that I don't mean the animations are too complicated, but there are many things the user could do. Someone could try to close the menu while it's animating into view. You can click a main link while the social links are animating. The menu could be closed without selecting a link. Those are just a few of the many possible scenarios. You're also targeting the same elements in different timelines so you have to decide how to reset them should they need to be targeted by a different timeline. All this is certainly doable. You just have to figure out the logic to control all possible outcomes. I find putting pen to paper and drawing a little flowchart of user interaction can help. Okay, now looking at this in small bites, I'd start with the concept of not allowing (or allowing) user interaction while pieces are animating. Take a look at this simple demo: Try clicking the menu button while the animation is playing. You'll see you can click as often as you like and the menu animation will just keep reversing each time you click. Now look at this version. Try the same thing. You'll see that the timeline will not reverse while it's playing. I've used the isActive() method to prevent anything from happening. You could also set a toggle variable to prevent clicks/hovers at certain times/events. It doesn't really matter how you check things, but this is an important concept in a project like yours as you have many moving pieces and multiple user click/hover scenarios. Can animations/timelines be interrupted? My recommendation to get you on track for this project would be to comment out all the SplitText animations and logic for now. Just focus on bringing the menu into view and listening for a click on the social/main links. Ask yourself, will you allow a click or hover before everything has animated into view? What happens if a user closes the menu without selecting a link? Once you get that set, you can start turning on the SplitText animations and controlling the click logic with a toggle or the isActive() method. I think you can get there if you just take a step back and look at it piece by piece. You're not really starting over. You're just turning off certain things while you make logic decisions. Make sense? Happy tweening.