Need support to understand how to independently trigger actions.

[gmorais1994]

Hello everyone.

 

First of all, thanks a lot for taking some time to read this. I understand that I'm not posting according to the guidelines for not having a Codepen, I tried setting one up with my issue but it didn't work out as I'm using Webflow, it seems like it's complicated to translate the code from there into Codepen. My apologies for this, I'm a designer trying to use GSAP to a specific animation in my page, I'll provide all the information I can within this post. 

I have followed this tutorial to get this really cool Zoom in Grid animation: 

Quote

https://www.youtube.com/watch?v=wGGOIx2NePE

 

 

 

 

 

Ended up going back and forth with the clonable Webflow until I understood a bit of what was going on. I'm facing a new issue where I'd like to use it in 4 different sections of my page. I've been able to play around and got this result:
 https://www.loom.com/share/82d1c175af2b41d8969adbe9968dba65?sid=a6aa1f64-da31-4565-b2c2-4adccfdfc3b6

As you can see, the animations on the Grid seem to be triggering at the same time, for both the ".final-state" remove and add in every grid. I'm trying to make it so each one of them triggers independently only when the user is in the corresponding section, but I have no idea on how to fix it.  I've read the documentation and I'm pretty sure I'm making the "Using one ScrollTrigger or animation for multiple "sections" mistake,  but since I'm not a developer, I'm really struggling to push it to the final version I'd like to achieve which I suppose is creating an array.

 

My codes are as following:

Inside </head> tag:

<style>
.grid {
	will-change: grid-column-gap,grid-row-gap,transform;
}

.grid-item {
	will-change: border-radius,transform;
}
</style>

<style>
.grid-2 {
	will-change: grid-column-gap,grid-row-gap,transform;
}

.grid-item-2 {
	will-change: border-radius,transform;
}
</style>

Inside </body> tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/Flip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(Flip);


const grid = document.querySelector(".grid");
const gridItems = document.querySelectorAll(".grid-item");
const grid2 = document.querySelector(".grid-2");
const gridItems2 = document.querySelectorAll(".grid-item-2");

// create the final state
gridItems.forEach((item) => item.classList.add("final-state"));
grid.classList.add("final-state");
gridItems2.forEach((item) => item.classList.add("final-state"));
grid2.classList.add("final-state");

// save that final state
const state = Flip.getState([grid, gridItems, grid2, gridItems2], {
  props: "borderRadius"
});

// revert to original state
grid.classList.remove("final-state");
gridItems.forEach((item) => item.classList.remove("final-state"));
grid2.classList.remove("final-state");
gridItems2.forEach((item) => item.classList.remove("final-state"));

// animate with Flip
const tl = Flip.to(state, {
  ease: "none",
  absolute: true,
  scale: true,
  scrollTrigger: {
    trigger: ".height",
    start: "top top",
    end: "bottom bottom",
    scrub: 1
  }
});

const tl2 = Flip.to(state, {
  ease: "none",
  absolute: true,
  scale: true,
  scrollTrigger: {
    trigger: ".height2",
    start: "top top",
    end: "bottom bottom",
    scrub: 1
    
  }
});
</script>

final-state CSS:

<style>
.grid.final-state {
  grid-column-gap: 0vw;
  grid-row-gap: 0vw;
  transform: translate(-100vw, -102vh);
}

.grid-item.final-state {
  width: 100vw;
  height: 102vh;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.grid-2.final-state {
  grid-column-gap: 0vw;
  grid-row-gap: 0vw;
  transform: translate(-100vw, -102vh);
}

.grid-item-2.final-state {
  width: 100vw;
  height: 102vh;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
</style>

 

Div namings on the First and second Grids in the attachments.

Thank you very very much for anyone that took some time to read into this. I know I'm very far from any best practices but I'd really appreciate your inputs.

Edit: I was able to achieve the result I was looking for by defining more "state" constants and set each one with their own timeline:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/Flip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(Flip);


const grid = document.querySelector(".grid");
const gridItems = document.querySelectorAll(".grid-item");
const grid2 = document.querySelector(".grid-2");
const gridItems2 = document.querySelectorAll(".grid-item-2");

// create the final state
gridItems.forEach((item) => item.classList.add("final-state"));
grid.classList.add("final-state");
gridItems2.forEach((item) => item.classList.add("final-state"));
grid2.classList.add("final-state");

// save that final state
const state = Flip.getState([grid, gridItems], {
  props: "borderRadius"
});

const state2 = Flip.getState([grid2, gridItems2], {
  props: "borderRadius"
});

// revert to original state
grid.classList.remove("final-state");
gridItems.forEach((item) => item.classList.remove("final-state"));
grid2.classList.remove("final-state");
gridItems2.forEach((item) => item.classList.remove("final-state"));

// animate with Flip
const tl = Flip.to(state, {
  ease: "none",
  absolute: true,
  scale: true,
  scrollTrigger: {
    trigger: ".height",
    start: "top top",
    end: "bottom bottom",
    scrub: 1
  }
});

const tl2 = Flip.to(state2, {
  ease: "none",
  absolute: true,
  scale: true,
  scrollTrigger: {
    trigger: ".height2",
    start: "top top",
    end: "bottom bottom",
    scrub: 1
    
  }
});
</script>

Again, not sure if it's a good practice but I'll leave it here since it might help someone. Thanks a lot for the posts in this forum, they really helped me out.

 

 

[GSAP Helper]

Hi @gmorais1994 and welcome to the GSAP Forums!

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.