unpin before the end of the scrollTrigger

[Alexandra Spalato]

Hello,

I'm working on this project https://cadell.netlify.app/

this is the animation code

sections.forEach(section => {
     
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: section,
          // start: "top-=10% top",
          start: "top top",
          end: "bottom top",
          scrub: 1,
          ease: "power4.out",
        },
      })

      tl.to(section.querySelector(".text"), { duration: 1, y: "-30%" })
      tl.to(
        section.querySelector(".painting"),
        {
          duration: 1,
          y: "-50%",
          opacity: 0,
        },
        "-=0.5"
      )
    })

I would like to pin the image on the left without pinspacing, but unpin it before the end of the timeline, basically before the next section overlaps

Is this possible ?

having a different end for the pinning

Thanks!

[mikel]

Hey @Alexandra Spalato,

 

If you would provide a minimal layout and the desired animation via CodePen, it would be easier to show you the possibilities.

 

Kind regards

Mikel

[ZachSaucier]

6 hours ago, Alexandra Spalato said:

I would like to pin the image on the left without pinspacing, but unpin it before the end of the timeline, basically before the next section overlaps

Is this possible ?

Sure, use two ScrollTriggers. One for pinning and one for the animation timing.

[Alexandra Spalato]

Ah ok, I didn't know that I could put several scrollTrigger

it works!

thanks

[Alexandra Spalato]

it works https://cadell-pin.netlify.app/ and this is what the client wanted

but now he has another request, he wants the image to disappear more or less when the text has finished scrolling, but has the text has different lengths depending on the sections, sometimes the image disappear later

basically he likes how it works on the section 3 " advice when selling"

I could do it, by doing one timeline by section, and fine tunning for each one

but I'm sure it can be done better more efficiently

this is the code 

 sections.forEach(section => {
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: section,
          start: "top top",
          end: "bottom top",
          scrub: 1,
          ease: "power4.out",
          // markers: true,
        },
        scrollTrigger: {
          trigger: section,
          start: "top top",
          end: "50% top",
          scrub: true,
          pin: section.querySelector(".painting"),
          // markers: true,
          pinSpacing: false,
        },
      })

      tl.to(section.querySelector(".text"), { duration: 1, y: "-30%" })
      tl.to(
        section.querySelector(".painting"),
        {
          duration: 1,
          y: "-50%",
          opacity: 0,
        },
        "-=0.5"
      )
    })

So basically I want the tween on painting to begin when the text is nearly scrolled to the end, but IDK how to write that...

I made a pen, with the same code 

See the Pen LYGVJvK by alexadark (@alexadark) on CodePen

but has the content and css are not there, It looks really bad

[ZachSaucier]

32 minutes ago, Alexandra Spalato said:

I want the tween on painting to begin when the text is nearly scrolled to the end, but IDK how to write that

Make another ScrollTrigger for it