section opacity transition enters the viewport and becomes pinned

[sunil kumar]

Hello everyone,

I'm seeking to create an opacity transition effect that changes from 0 to 1 as soon as a section enters the viewport and becomes pinned. During this time, the opacity of the current section should transition from 0 to 1. After the pinned section's scrolling progress is complete and it is unpinned, I aim to have the opacity of the section transition from 1 to 0 while the section is being unpinned and until it moves out of the viewport. Despite attempting various approaches, I have been unable to find a successful solution. Any assistance and guidance would be immensely appreciated.

See the Pen JjwjJzp by fastestsunil (@fastestsunil) on CodePen.

[mvaneijgen]

I'm not completely sure what it is you're trying to do. I would be nice to have all puzzles pieces in place for a minimal demo, so that we can see what is happening to all elements. I had to add some images my self with the class .girl-img to see what was happening with those. 

 

As soon as you want to do anything more than one thing it is best to use a timeline, so instead of having something change on the onUpdate, just create a timeline and put all your animations on that timeline.

 

It is better not to animate properties like width, height, top, left, right, bottom, and use their respective transform properties. I've placed some comments in your JS, check them out. I've also used .from() tweens instead of .to(), most of the time these are easier to work with. 

 

Hope it helps and happy tweening! 

 

See the Pen qBLBXLG?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[sunil kumar]

tl.to(section, { opacity: 0 }); // Fade out the section.
tl.from(section, { opacity: 0 }); // Fade in the section.

I want the entire section to have a fade-in effect when it comes into the viewport until it's pinned. When the section becomes unpinned and starts moving out of the screen view, I want the entire section to have a fade-out effect, not within the timeline.

https://moon-project.webflow.io/ 
I am attempting to replicate a website that contains the same type of section I'm trying to emulate. I'm doing this to practice animation using GSAP. If you scroll down past this website, you will see what I am aiming to achieve.

[Cassie]

Heya!

 

Maybe something like this?

See the Pen vYvYeVZ?editors=0010 by GreenSock (@GreenSock) on CodePen.

[sunil kumar]

Thankyou so much for your help, @mvaneijgen @Cassie I really appreciate it.