[Problem with pinnig element]

OK @Cassie, make some updates in my pen

Look I want to pin 1 element like it works now.

But when second slide is Active i want to avoid scrolling but put the image in pinned section

Like in image attached, because like you see second slide is activated because background is changed and image is shown

And in end of Animation last image shouldn't be hidden but pinned to bottom of section

 

 

[Problem with pinnig element]

Hello @Cassie

Like on https://www.bolt.com/ page 

on left side we have normal text content and from right side we have image which I want to change in deppends of which slide we are

 

Checked This page before and similar effect is in page 

See the Pen YzyqVNe by GreenSock (@GreenSock) on CodePen

 but I have different DOM structure and it doesn't work for me

 

[Problem with pinnig element]

Hello

I want to place on the right side, a container with an image, which, depending on the active slide, will change the image and finally will be at the very bottom of the section it is in.

Additionally, when I start pinning an element, it moves away from the right side of the screen, where it should be located.

 

What I'm doing wrong?

 

See the Pen MWVrZeg by mateuszkania (@mateuszkania) on CodePen

[Weird gradient behavior on change background]

Now it works correctly. I will create new pen with my solution of this problem

See the Pen KKoyEbY by mateuszkania (@mateuszkania) on CodePen

Thank you!

[Weird gradient behavior on change background]

HI @GreenSock, thanks a lot for this solution, but it not works correctly with data which I got from API but some gradients are in CSS vars

 

I created extra div which has in style backgroundColor

  <div className="bg-placeholder" style={style}></div>

and this div is hidden by default and it is shown when particular slide is active

.bg-placeholder {
  height: 100vh;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: opacity 1.5s;
  width: 100vw;
  z-index: -1;
}

.slider-slide.is-active {
  .bg-placeholder {
    opacity: 1;
  }
}

 

[Weird gradient behavior on change background]

Hello,

I want to change background dynamically like on page bolt.com but like you see, gradient looks weird on entry and on change slide you may notice flashing. 

Anyone can help

thanks

See the Pen RwMjvZw by mateuszkania (@mateuszkania) on CodePen

[Animation from GSAP homepage]

https://codepen.io/creativeocean/pen/mdrZYY

Found! 

On slider is link to see CodePens🤦‍♂️

[Animation from GSAP homepage]

Hello GSAP team,

could you add on Codepen animation which is used on homepage  

I'm talking about animation with circles.

 

Thanks

 

[Big unnecessary spacing in ScrollTrigger]

Hello, it helps. Also adding height for element in css helps too.

 

Thanks a lot!

[Big unnecessary spacing in ScrollTrigger]

Hello Community,

I'm starting my adventure with ScrollTrigger. Generally I want to copy effect from  http://markup.io

here is my CodeSandbox https://codesandbox.io/s/gsap-demo-7e6hl?file=/src/components/Carousel/Carousel.js

 

On bottom of every section is generated big unnecessary spacing. Images will be with different height and they always will be from center to the right edge of the screen. I would be grateful for any suggestions on how to fix and improve this.

 

Thanks!