Dennyno

Hi all, how to achieve a smooth scroll on this layout? I did cut away scrollsmoother as the layout I am working might had problem and I'd had to change lot of this. Basically need to smoothscroll only on the part/page where I have this design, as using only scrolltrigger seems a bit buggy. Gonna test scrollerproxy, but never used that. Thanks for any help

Thanks a lot @GreenSock Jack! In case, to make the animation start once, then freeze till user do something, shall I add another timeline? Or do you think sould be better, basically to duplicate this one and use 2 events? Thanks again for the hint

Reference with old syntax and TweenMAX with the elder MotionPAth https://codepen.io/pyrografix/pen/qrqpJN

Hi, I just discovered that MorphSVGPlugin.pathDataToBezier is not integrated inside newest MorphSVGPlugin, but needs the MotionPathPlugin. I am missing something and seems not loading as it should, even changin the syntax and following the beginners documentation about MotionPath... Something like: var path = motionPath: "#arc" - but not sure which is the problem (are the problems lol...) Any help to make the archery working, please?

Hi, how to increase the progress value by the native horizontal scrolls snapping percentage? Example 10 elements = 100% and get progress width by the horizontal scrolling. I tried also using "horizontal:true".. but I can't find a working solution. Actually works by default vertical scrolling, while I need to get values from inner items. Thanks

Hi, thanks! I was trying to increase the progress while scrolling between items using basically overflow-x:scroll and the CSS native scroll.. gonna open a new thread so... thanks meanwhile

Sorry for opening again this thread. Whats the logic to achieve the same progress, but horizontally? https://codepen.io/DedaloD/pen/jOKPwxN I tried also with using "horizontal:true" with no result. I used a progress element, so as u said needs to go to value 1 - but horizontally by item css scrolling / snapping (and it's not working). But also using a basic span element that should scaleX seems not working. Thanks @mvaneijgen

Hi Cassie, nice to hear from you! PS I'd like to get one of your hats! ? ? Btw, is this something doable via js? Basically: split this text, then cloneNode, then change each char to a dot, then again create an aria-hidden elem and append after the original node? Or this way is too tricky? *not asking to do it, and I don't actually need it, just to know something new and learn ⚫️?

Mitchel intentionally omitted the stagger above, btw.. This is the code: document.querySelector("#btn").addEventListener("click", () => { getRecipe(); console.log("first done"); }); function getRecipe() { let url = `https://api.spoonacular.com/recipes/complexSearch?&apiKey=596b9db3179446a09d18a9eb32c1f801&includeIngredients=ham,egg&addRecipeInformation=true&instructionsRequired=true&number=20&fillIngredients=true&addRecipeNutrition=true`; fetch(url) .then((res) => res.json()) // parse response as JSON .then((data) => { recipeArray = data.results; //This is a function that wraps the titles of the returned recipes in <h2> and <a> tags to input into the dom let recipeTitles = function () { return recipeArray .map( (el, i) => `<h2><a href="#" class="recipeTitles" id="${el.id}">${el.title}</a></h2>` ) .join(""); }; document.querySelector("#recipeContainer").innerHTML = recipeTitles(); gsap.from("#recipeContainer h2", { opacity: 0, duration: 3, stagger:.3 }); }) .catch((err) => { console.log(`error ${err}`); }); } Credits to him, btw

Just seen now this solution! This is an extra thing I'd have needed latelly, so thanks twice Jack! Now, talking for talking, and going deep: Using the text scramble plugin, or any other (gonna check in all gsap premium extensions, maybe the split-text one): Is possible to scramble text from dots, to reveal text dinamically? Is not a "real random shuffle" as GSAP Scramble does, but more a "replace".. hope getting understood. Example: "...." became "hello" by scrolling? This can be done manually with 2 absolute elements, just asking if is doable in plain JS, avoiding to write twice the markup each time... Thanks, below an example with the "manual markup way". https://codepen.io/Mamboleoo/pen/zYzPryN

@mvaneijgen sorry again, how to let the progress count also another gsap animation inside any of the containers loop? In my case I added a before/after image for testing, as u can see the progress goes to its way without calculating the pinned animation below, which obviously makes the section higher. Thanks again https://codepen.io/DedaloD/pen/poKovEa

OH god! As usual lost myself in a drop of water! Thanks @mvaneijgen

@GreenSock Jack, never mind, but "display:contents" has been a killer trick to solve the problem with the transforming (fixed/sticky) container! This is something totally cool. Even if.. I guess, the smooth scroll feature is mitigate using this CSS rule, but could be an easy fix to test both, as needed, without touching other libs (if present), nor removing Scrolltrigger / Scrollsmoother

Hi, how to achieve sections' height to handle each relative progress bar with scrolltrigger? I did added each progress element its own class, to make things easier, and avoiding a foreach(or for of)... but even this way I cant found a solution actually. Thanks for any help

Hi all, following this thread old (sorry) On this sticky sections https://codepen.io/DedaloD/pen/RwydaLr is it possible to any scrolltrigger animation inside some of sticked containers, while they come into viewport? I couldnt use a pin because, on the full project, there's a container with smooth scroll (kinda like with translate 3D and a fixed body) and this breaks any. pinned section. (I tried also with scroltrigger's rules: Repaint, scroller.. nothing worked.) Do I need to use intersection observer? Example (just to say something): scale each "chapter" title: to(1.2) Just to know, thanks

Totally agree and that's a fkin' great solution! I did something different, basically adding an extra pin on top of the dom, but your way seems also great! Thanks @Rodrigo https://codepen.io/DedaloD/pen/OJZBOYX

Solved, using the right approach https://codepen.io/DedaloD/full/OJZBOYX

Hi, following this thread: Adding the "once" param fixes as suggested, but how can I reverse the animation only when scrolling and ending again to top (Y: zero) ? [or example Y-100px] onEnterBack I guess many not work, being a fixed element that doesnt enter back nowhere and I dont undertand where to add any Y value to start reversing, as it simply stay there fixed, lol Something like: scroll down, with this scrubbing, once scrolled really close to the top of the dom, then reverse the timeline, but without the scrubbing. Im stucked and I dont even know if is something doable via scrolltrigger itself. Thanks and sorry for keep on the thread, but for a misunderstanding I closed the previous one

Thanks, I tried with the "once' property, and it freeze as I wished, now.. how could the onEnterBack work if is something that never enters back? Is something conditional that Im missing I guess... I maybe need to use also a scrollTo plugin, with something like if scrollTo Y:0 than reverse the animation? (EDIT: not only the animation, but the whole timeline I guess, as I need go allow users going again back and forth . up and down) https://codepen.io/DedaloD/pen/rNvqLWG

Wow! Thanks! @mvaneijgen Yep, now I see bright! How to start reversing the animation only when reaching again the top? top -=400px (for example)

@mvaneijgen Need to keep your yellow element (on my example the canvas, or it’s container) pinned. always pinned. like an opening door at 3/4.. ? Fixed on that position till the end on scrolling, then again, reverse the animation when reaching the top, but this element must always stay fixed there… Reference: https://avanzare.eu/reframe_wp/demo/ (Mobile view) Thanks

Tried playing here and there, but I'm still missing something...

Hi @Rodrigo, thanks! But even this, doesnt work! Maybe it's my markup the problem.. I dont understand, I was trying also using flexblox and aligning to the center, neither that seems the right solution. Btw thanks for sharing an idea https://codepen.io/DedaloD/pen/ExLeWvx

Hi all, Im losing myself in an inch of water! I need to transform the origin of the canvas on my demo and pin it, till the end of the document, then reverse everything when I scroll again near the very top. To fake the perspective I used a clip-path (even I guess that using something like: transformOrigin: "-500% 50% -100px", rotationY: 25,z: 500 m May work even better for the cause. Btw what's the problem of the jumping pin? Thanks

Very belated, but thanks