momo12

I even tried this method but didn't work

Hi, I have this code but why the clip path is not working? I want to animate the text and it works but looking for a solution to add each line inside a mask.

Wow! A great idea was discussed here

Thank you so much!!

Thank you! I was looking to animate elements from bottom to top. @GreenSock did the best thing! Thank you guys! You really help the community to learn

Guys I have a question. GSAP Flip will start Append.child from the first element it finds. Is there a way it does the same thing but the for the last item? I mean if it's liks img[0] --> img[1] --> ... --> img[9] It starts like this img[9] --> img[8] --> ... --> img[0]

Guys I have a question. Is not this code enough (The last lines) to tell GSAP Flip runs only once? const wrap = document.querySelectorAll(".right-wr"); const hidden = document.querySelector(".hide-wr"); let isGrid = false; let counter = 0; function doGrid() { const statee = Flip.getState(".right-wr"); wrap.forEach(rel => { hidden.appendChild(rel) }); wrap.forEach(rel => { rel.classList.toggle("grid"); }); Flip.from(statee, { duration: 0.5, absolute: true, stagger: 0.1, ease: "power1.inOut" }); }; gridbutton.addEventListener("click", () => { if (counter == 0 ) { doGrid(); } }); Update: I forgot to increase the counter value after the first click! wasted 5 hours to figure this out

Thanks a lot!

Guys a basic question. We have two arrays. I want to put the first item of project inside first item of lefthide and it goes on (Using Gsap Flip and Append child). project[0] --> lefthide [0] project[1] --> lefthide [1] ... Do you have any solution?

I was looking for this! But didn't know how to search for this Thanks a lot!!!!

https://codepen.io/emdesigner-or/pen/ExLzQZo I only want the black button takes the wrapper to its Grid state and the Orange button takes the original wrapper state back. @Rodrigo Thanks!

Yes I know. But I don't want for example the second button be able to revert it back.

I want to target the Transition from State A to State B with a button / and reverting this back with another button.

Hello guys, For GSAP Flip I always use this command: document.querySelector(".button").addEventListener("click", () => { But if there is a way to tell browser on clicking on a "A" button, takes users from State1 to State2 and one clicking on a "B" button reset the state? Like GSAP

Thanks I know how to animate the Grid. The thing is the Flip with a delay attribute works weirdly! As you can see inside the below example, there is a hiccup on clicking: This happens beacuse of the Scale attribute. But is there a way to keep that while using Delay? @Rodrigo https://codepen.io/emdesigner-or/pen/xxjeMLa

Guys, GSAP Flip is not working as I want. As you can see in the provided demo, it doesn't do anything to add some delay to the animation well. I know I can defined a delay with the settimeout command but Is there a way to fix the provided demo? Does not "dealy" value add delay to the animation?

Hi guys, The scroll trigger and Locomotive scroll are working together. But is there a way to use Scroll Trigger, instead of Scroll To to take user to a sepecific section? Scroll To not working with Locomotive Scroll. I'm using the native Locomotive Scroll command now.

Thanks a lot man!

Hi guys GSAP flip is not working as I expected. 1- First there is an error around the line " imagewr.classList.toggle("reorder");" Uncaught TypeError: Cannot read properties of undefined (reading 'toggle') 2- Second why the changes to the .img-wr-2 are not being applied? 3- Why the the class name state changes without any aniamtion?

The trial is working ... What I was trying to avoid was exposing the code or using a JS and others can grab the code... The thing was even the file I have is complete and is what the club generated for us --> We still get this error from the Google Chrome console: which says the Scroll Smoother is not defined! I left it to my friend but I think somehow, we missed something when we generated the token. For now, we move forward with the Locomotive but return to Scroll Smoother later when everything is done.

Thanks for this!

Yes my friend paid for that. And asked for help here but they told me share a demo. I don't know how I can share the code with you but not breaking the laws as people can copy and paste the code!!!

Hi guys, a question. Why the text jumping when I scroll with the mouse wheel? Normal behaviour with touchpad!

For guys who have the same problem: use this inside CSS html.has-scroll-smooth { overflow: hidden; position: fixed; left: 0; right: 0; top: 0; bottom: 0; }

Guys I have a quetion I used Locomotive scroll and GSAP scroll Proxy but it casues extra scroll. This only happens with Mouse wheel and not the scroll-bar! gsap.registerPlugin(ScrollTrigger); const locoScroll = new LocomotiveScroll({ el: document.querySelector(".content-wr"), smooth: true }); ScrollTrigger.scrollerProxy(".content-wr", { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, pinType: document.querySelector(".content-wr").style.transform ? "transform" : "fixed" });