Scroll zoom in image and text change

[Sukru]

Hi, in the codepen example i shared i actually want to do the following. When the image is zoomed, the image goes to the next image and in the same way, it gets visual zoom and its text comes in. Can you help me with this?

See the Pen QWOYwXe by sukruemanet (@sukruemanet) on CodePen

[OSUblake]

Do you mean a new image in the exact same place, or it unpins and have the same effect in another section?

 

[Sukru]

13 minutes ago, OSUblake said:

Do you mean a new image in the exact same place, or it unpins and have the same effect in another section?

 

yes i am talking about the new image in the same location as you said

[OSUblake]

Well you didn't have the extra stuff in your demo, but you would just continue on with the timeline. It might be easier if you just create a separate timeline and just add it to the main one. I'm guessing you will probably need to do some absolute positioning to overlay the next content over the original.

 

let tl2 = gsap.timeline()
  .set("#intro .background", { opacity: 0 }) // hide the previous background

  ...

  .to('#intro .background-2', {
    scale: 2.5,
    duration: tl2.duration(),
    ease: 'power1.inOut'
  }, 0);


introTL.add(tl2);

 

[Sukru]

2 hours ago, OSUblake said:

Well you didn't have the extra stuff in your demo, but you would just continue on with the timeline. It might be easier if you just create a separate timeline and just add it to the main one. I'm guessing you will probably need to do some absolute positioning to overlay the next content over the original.

 

let tl2 = gsap.timeline()
  .set("#intro .background", { opacity: 0 }) // hide the previous background

  ...

  .to('#intro .background-2', {
    scale: 2.5,
    duration: tl2.duration(),
    ease: 'power1.inOut'
  }, 0);


introTL.add(tl2);

 

Hi, do you have a chance to apply it to the project in the codepen, i could not solve it

[OSUblake]

3 minutes ago, Sukru said:

Hi, do you have a chance to apply it to the project in the codepen, i could not solve it

 

Can you set up the HTML/CSS first? Then I can show the timeline code.