iDad5

Well in that case your suggestion seems way better suited to the situation. I actually answered from memory, thinking of a similar situation I solved - but my setup was different.

As you likly will work with snap(-ping), there is a callback onComplete. In Combination with labels that gives you the tool to change the classes inside you navigation ad history stuff if you like - whatever. Does that help you, or do You need more explanations?

Conceptually it should be possible. You could either go for three separate ScrollTriggers, or the container animation. There should be no need for full height - it just depends on how you set up your page and set your start and end points accordingly. It is a bit tricky sometimes to wrap ones' head around the concept, and also there are often many ways to achieve what you want, some more efficient then others. As @Carl mentioned in an other thread setting up the document and CSS-Structure often is half of the work. I'd suggest you build a simplified Version of your page (including) the horizontal part and test it out.

Yeah, I thought so too, but I was too lazy (hadn't enough time) to actually go all in as you did and 'repair' things. @akapowl: Great work on that answer. Your remark about the counter made me research a bit, as I'm if at all mostly only familiar with the German words for those typographical terms. https://lauraworthingtondesign.com/pdf/web/viewer.html?file=%2Fassets%2Fgallery%2FLW_Type-Anatomy.pdf So counter is right, but it can/is also be used for open enclosed spaces - where 'aperture' is used in the pdf. If you follow Wikipedia on this one, the aperture however is just the 'opening between an open counter and the outside of the letter.' I always find it fascinating to delve into the secret language of things - thanks for the inspiration

Ok, thanks for the explanation, guess I just assumed, that if would make no sense to let fron-end animation code run at the server at all, but I'm really not familiar with that stuff.

Maybe it is due to my lack of understanding of nextjs, but gsap animations are usually rendered in the browser, rendering them on the server side is something that seems odd to me. Do you have an example?

I actually have it vice versa, Chrome needs -webkit-background-clip: text; and does not show it as intended, Safari 15.5 does. Anyhow, adding the -webkit prefixed version should do the trick:

I'm not a react guy, but from what I at first see at first glance, there seems to be nothing wrong with what you're doing. Is anything not working as intended?

First: You are using an outdated version of GSAP. I really recommend using GSAP3. What you are doing is building a timeline that has 2 tweens each of them 1 second in duration. Then you scale that to .1 wich effectively slows it down 10 times. So you now have two tweens with 10 seconds duration each. The first tween seems to go fast, because you animate a stroke that is a composite path. To animate the total length of that path would take 10 seconds, but as the anmiete property is the dash array, which actually starts anew with each part of the composite path, those are (in average) only 10% (as you have 10 letters) of the whole path length. So what you see is the animation finished in about a second, whilst it actually goes on for 9 more, without anything to see. then your net tween sets in, only that tween tries to animate something that isn't animatable... Does that help you?

I know, I know... But it's a bit of a 'chicken or the egg' thing. As long as it's hard to use - aka: not easy to google - the interest will be slow to build. But I try to tamper down my missionary tendencies. *ohhhhmmmm*

That is what I meant. and yes it is necessary - it's jut not mentioned (as far as I could find it) at the install page. It's probably just me, but I guess that a lot of younger (?) programmers just go through all the trouble of npm packaging and what-not, partly because the web is so full of examples and use cases. Oftentimes I feel it ist totally unnecessary to go down that road (nowadays at least). If you look around the forum a lot of questions are being asked, because those 'magic'-tools in the don't work as expected. Going the road of native JS modules (and promoting it) can be a way of giving back some control and help to understand that no magic is needed.

If you load your own JS-file after gsap it is really strange that, gasp isn'n defined in that script. Have you made sure in your browsers dev-tools that the files are actually loaded? (no 404 in console?) I generally like to initialize almost everything only after the DOM is loaded like this: document.addEventListener('DOMContentLoaded', init); function init() { //do this fo that in other functions } maybe that helps?

@Dodaxx Are you asking me?

I started using ES06 modules in one or the other project some time ago but in most of my cases and with the way I work and tick it wasn't really a great improvement so I didn't make it my 'default'. With the possibility of dynamic imports in ES2020 (https://caniuse.com/?search=dynamic import()) I think I want to make it my 'default' now. With the help of the Install Page (https://greensock.com/docs/v3/Installation) I'm sure I can/will figure out how to do it, I already can see however that the import statements in a pure ES Module setup without build tools will have to have the '.js' extension in from, which I couldn't see mentioned at the install page... Would others also be interested in a dedicated description on how to use GSAP with pure JS ESModules without the use of a build system? And would the team consider adding such a description to the install page? I am a big fan of working as close a possible with the 'pure' standards and hate to rely on to many tools that I have to keep track of etc. and I know, that I'm a bit odd that way. But I feel it is a good thing to move forward as standards and browser support evolves. And I think "promoting" that proved to be a good thing in the past, even if it requires some getting used to.

I cannot find where I did it, but im rather sure I used registerPlugin in conditional statements in various places without problems. I usually do not use build tools though (for a lot of reasons) and as I make sure to load gasp and the plugins in the correct order registerPlugin is redundant for me in most cases anyhow. My understanding however is that usually there should b no need to place registerPlugin always on top as long as you register the plugin before you use it - if it is necessary, but I giving my limited experience with build tools I might be wrong and would happily hear form those who are in the know - and also surely it is nothing wrong with registering at the start of a JS file as a convention.

Hi, I‘m not a Vue person at all, I do work with TypeScripte though. The information you offer is rather sparse, but from what I can see it seems to me that the definition is found correctly, but that is used on an object that isn‘t a timeline. can it be that instead of (pseudo-pseudo-code): stuff = new GSAPTimeline (something ); you have stuff = something; just a guess

Just an Idea, that might or might not work for you, if you set slight different transformZ values on you images and a matching perspective on the container, you might get the parallax more or less for free. (you could also animate the z-value with GSAP - maybe in relation to the movement speed of the mouse - Observer plugin comes very handy for those things) And as I'm on it - using tilt sensors on tablets and mobiles can be very cool...

Hi Ted, I tried commenting out the svg and set the height of the containing div to the same one it has with the svg in it and I couldn't see any difference in the scroll behavior. Are you really sure that the svg is the reason for the unexpected behavior? I have to admit though, that I'm not sure, if I actually did understand your description of what isn't going as you wanted it to.

Hi, there. the problem (despite my epic fail in my first comment) kept me thinking, and I had to give it a try to come close without WebGL. It took me a while to get my head around and the demo I created is still very rough around not only the edges. Basically what I tried to do was moving (scrolling) elements trough the viewport and lifting them on a sine wave with the highpoint at the center. Also rotating each element at the correct grade according to its' position on the wave. My rusty math was a bit challenged, but the real challenge for me was keeping the perspektive right - 3D CSS is just something, I'm not proficient. It got trickier as I wanted to factor scroll speed in, but as proof of concept it finally worked for me as prof of concept. It's a long way from smooth and it of course can not hold a candle to Quang Anh's BBDO link, but as I made it, I thought I'd share it. https://codepen.io/mdrei/pen/NWYwmBW [I did it my usual TypeScript construction without too much thought about the code structure and commenting - for me it was an interesting exercise and I'm happy with what I learned. In case someone should be interested in an explanation, I'll happily try to explain.]

Thank you both for your patience. Should have guessed as much, I seem to be be thinking in circles...

@akapowl Thank you for pointing that out. And I'm sure you are right, and as I said I was under the impression that there was bending going on, but dismissed it as a trick of the mind, as I vas looking on a small display only. Sorry for doubting you, didn't mean to. The wild guess with the old version was likely due to the fact that I realized the use of the CSS plugin wich I always (for which ever dumb reason associate with v2 - my very 'sloppy' bad)

Probably of no use for this already solved problem, but maybe of use for future reference: window.scrollTo({ top: 100, left: 100, behavior: 'smooth' }); from (https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo) That should have decent support, and might solve some bread and butter scenarios, where adding and removing a class in the body could seem impractical. Äh - thinking of it what kink of fairy-dust is this, you're using @Cassie 'scroll-behavior: smooth' is according to the thread set directly on the html element. What magic is it that removing an unrelated class (but similarly named) from the body makes this work? (Just to be clear - it totally sounded logical to me in the first second and third instance - and I'm not trying to by 'smarty pants' [was that what you said earlier?] I'm genuinely baffled...)

@akapowl hi, As far as I could see, there is no WebGl at play, I have not dug too deep, but as far as I came, it very much looks like its all done with GASP and v2, if I'm not mistaken. 3D transforms that mostly happen at speed seem do di the trick, but believe me, I felt very sur too, that there was more going on... But you might still prove me wrong. Anyhow, there is some 3D math at work that takes some understanding, but often isn't really that complex, once you figured out how to do it. I'd guess, that they - distance from the middle of the page would be the factor multiplied with scroll speed that in turn influences the 3D-Transform z-distance and the angle towards that center line. at least that would be my first try. And I would start without factoring in the scroll-Speed at first. With modern browsers one usually can at lead as a start go with the native scroll event, and just place the 3d position of the element with gasp.set(). That's how I would start....

If I get you right, for what you are describing, you could probably work without ScrollTrigger and pure CSS, but when you present the iPhone site as your inspiration, you might look for a lot more than what you describe. Is that possible? If so, I always find it helpful to get at least a somewhat clear idea of what you will need/want. Regarding you CSS-issue, that sound's quite easy to solve, but as a competent CSS setup often helped a long way in achieving clever aminations you might try to brush up un that first. I found need help, starting slow with a CodePen usually makes it a lot easier to get help here, and don't be shy asking, we are all learning.

If you insist on the fight metaphor, I'd say, that it's more like you found a unloaded gun on a man how has died of old age, while dragging himself to the duel - grounds. Pfff - those young ones ---- sigh.