Dennyno

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