Dipscom

You are loading around 30 megabytes of content right out of the gate and it seems that quite a bit of it are PNG images that you can convert to reusable assets and mix them with live text. Why you have a 5.6MB uncompressed js bundle is beyond me. What is on this bundle that is needed? 761kb of gzipped javascript looks excessive if all you have is a presentation website.

Indded I have. In fact, right at this time I am working on a web app that is built with Svelte and will make use of GSAP. There's no mystery to work with GSAP and Svelte. Load up the library via CDN (I just prefer that way, saves on the js bundle and takes advantage of caching) then GSAP away. Did you have any particular question?

Hard to believe you are sorry with that smirk on your face. ?

That's happening because you're setting the default skews with CSS and then telling GSAP to animate it. All you have to do is .set() your defaults using GSAP's method or, you can do a .from() tween. Oh well, bin it. Zack responded while I was typing... Such is life. No brownies for me.

I understand. It's like that everywhere. To the ones outside it's one image, to the ones living in it, it's a different reality. I have a friend whose father lives in Japan (they're originally from the UK). He told me that, in Japan, there's this view the japanese are above the foreigners. They will treat you politely to your face but to your back they will refer to you as less than them. I've never been to Japan, all I know of it and its culture if from consuming Manga and TV shows and films from it. As for the DeepL, give the below for it to translate and let me know if it makes any sense. It shouldn't as it's just a tongue twister and it isn't even in English. Três pratos de trigo para três tigres tristes.

How come? To the outside world the Japanese have the reputation of being respectful and honourable. Surely that would translate into a pleasant environment. I guess one could say the grass here is very green. And now that you are using words like "peruse", you cannot claim to have poor English language skills.

Is there a particular reason why you need such tiny numbers? Could you not work with a viewport that is orders of magnitudes bigger and, thus, give you room to manouver without having to go to such small decimal places? Instead of having your working viewport be 300 by 350, you could be using something like 300000000 by 350000000. Visually, there would be no difference but it would help on the math.

I forgot to mention: have a look at the ScrollTrigger page it has detailed information about all the things it does.

Indeed you have now. The class is not toggling because you're not targeting the correct element. As you have it, it's adding the class to the trigger element ".sec1". ScrollTrigger.create({ trigger: ".sec1", markers: true, start: "top top", end: "top top", toggleClass: "menu_black" }); You want to define a target and add the className to it. ScrollTrigger.create({ trigger: ".sec1", markers: true, start: "top top", toggleClass: {targets: ".ham", className: "menu_black"} }); Also, you will want to remove the "end" property from your ScrollTrigger.create() call. Otherwise, it won't work as well because it will add and remove the new call at the same time if your starting point and ending point are exactly the same.

Hi @dotun12 it's because you're still loading the wrong ScrollTrigger library. Check out the link that Zach posted to the most common ScrollTrigger mistakes for further details.

Hello anomie, Welcome to the forums! There is no need to apologise for not being a native English speaker. There are plenty of us here. The problem with what you are asking is that you want to use ScrillTrigger but you are hijacking the scrolling and preventing it from happening by using transforms. As no scrolling has happened, ScrollTrigger has no way of doing anything as, no scrolling has happened.

I wouldn't go that far. I think you would still need two scrollTriggers, one for the events and one for the animations. You keep the events one for the onLeave event and anything else you need to happen whether the user has clicked or not and the rest goes into the animation scrollTrigger. This second one, you kill and create as needed depending on whether the user has clicked or not.

Stepping on toes, that's what I am here for.

gsap.registerPlugin(ScrollTrigger); var container = document.querySelector("#scroll-container"); var height; function setHeight() { height = container.clientHeight; document.body.style.height = height + "px"; } ScrollTrigger.addEventListener("refreshInit", setHeight); gsap.to(container, { y: () => -(height - document.documentElement.clientHeight), ease: "none", scrollTrigger: { trigger: document.body, start: "top top", end: "bottom bottom", scrub: 1, invalidateOnRefresh: true } }); Now, don't go thinking you can just copy this, paste on your project and it will magically work perfectly. You have to read this code, understand what it is doing and adapt it to your needs/page structure. GSAP is magical but it does not read minds.

Hi @dzemik11 what exactly doesn't help? I've looked at your code and at what @akapowl has suggested and I can see plenty of differences in what you have in your example versus what is on the codePen. There is nothing in your code that tells GSAP to recalculate the sizes and update the playhead so, it stands to reason that when resizing the window, things will look out of place. You can fork the pen above, tweak it to your needs and implement the resulting code in your project, it should work just fine.

As with everything in life, it depends. With the exception of copying the gsap folder from node_modules, as explained ealier by an entire flock of smartly dressed seagulls, serving files and folders from a 'build', 'public' folder comes down to your needs and if those assets already exist somewhere else. There are arguments in favor and against for both approaches. You'll be better off understanding why you would want to use one over the other and when to do so. For GSAP itself, the non-club plugins, there's minimal advantage to include them in your bundle. So, slap that CDN link on your project and code away happly.

If I understood Eleventy's proposition correctly, I would suggest using the CDN. There is no need to bundle GSAP with you JS bundle. You can have it cached in the user's browser and all the goodies that come with it. If you end up using the CDN, you don't need to do much from the JavaScript point of view other than make sure it is loaded before your main.js file. And you'll have to tell you code editor knows you're referencing an external library not present in your environment, just like the Seaguls so elegantly put.

Zack and the Official GSAP v3/ScrollTrigger Plug™️ to the rescue! ??????

You can always place the image where you want it to end, use a "from" Tween for the parallax and clear that transformation at the end of the Tween. It will clear the inline transform applied to that element which should solve your issue.

Hello Flor, Welcome to the forums! Feel free to create a brand new post for your questions. Specially now that GSAP is on V3 with a different syntax. The old conversations might confuse less experienced people and probably won't be relevant. As for your issue. I only looked at it for a couple of minutes, debugging an animation in a full production site is not ideal for us as we have very little context. Anyway, in your <figure> tag with the class "member-card-img" you have a transform rule. Remove that and your issue goes away. The compounding of this transform and the one being applied by the scaling is what is causing the jitter.

Well, that certainly pikes my interest. If I ever find myself with spare time to go over those old books of yours, I shall take you up on your offer.

I shall have to research "coaxal". "Conic" and "circles" I am familiar with. All of those words together I am not, I am afraid. SVG will give you the potential of an infinite amount of nested coordinate systems.

I hope you have many more long and enjoyable days like that one Richard. I can relate to the joy of learning and hope to continue in this path throughout my life. And, if you want to have fun with coordinate systems, axes and maths, have a dabble in SVG, then sprinkle some GSAP on top of it... I am confident you'll find it interesting.

Not a problem. I would say it was not a silly question if it led you into the solution to your problema and gave you further insight.

Hi OrhanOzkercin, Welcome to the forums! You're almost there. If you want to target only the children of the element that has the ".active" class on it, you need to specify it on the CSS selector. gsap.from('.active *', {...}) Here's a handy list of selectors for you: https://www.w3schools.com/cssref/css_selectors.asp