Jump to content
Search Community

Help me fix this animation , codepen linked below

Sougata
Moderator Tag

Recommended Posts

Posted

We'd love to help, but vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chances of getting a relevant answer:

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

Would you mind clarifying your question please and making sure that you include a minimal demo that illustrates the problem so that we can help you? 

Posted
2 hours ago, GSAP Helper said:

We'd love to help, but vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chances of getting a relevant answer:

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

Would you mind clarifying your question please and making sure that you include a minimal demo that illustrates the problem so that we can help you? 

image.thumb.png.904e568ea14991cdaabfc0bede5c5b1d.pngimage.thumb.png.904e568ea14991cdaabfc0bede5c5b1d.pnghttps://www.btsbioengineering.com   here is the link to the website , I want to replicate the same vertical slider

Posted

Hi,

 

It's the weekend, please be a bit more patient in getting a response 🙏

 

Instead of creating a ScrollTrigger instance and pinning the same element multiple times, just create a Timeline, with a single ScrollTrigger instance and pin the entire section just once, as shown in these demos:

See the Pen wvZqwyg by GreenSock (@GreenSock) on CodePen.

 

See the Pen wvYVjvb by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

  • Like 1
Posted
3 hours ago, Rodrigo said:

Hi,

 

It's the weekend, please be a bit more patient in getting a response 🙏

 

Instead of creating a ScrollTrigger instance and pinning the same element multiple times, just create a Timeline, with a single ScrollTrigger instance and pin the entire section just once, as shown in these demos:

 

See the Pen

See the Pen wvZqwyg by GreenSock (@GreenSock) on CodePen.

by GreenSock (@GreenSock) on CodePen

 

 

 

See the Pen

See the Pen wvYVjvb by GreenSock (@GreenSock) on CodePen.

by GreenSock (@GreenSock) on CodePen

 

 

Hopefully this helps

Happy Tweening!

Hi , so I got some lil help from chat gpt but I dont like the white space it creates , I tried pinSpacing but then it overlaps .can you please look into it ? I did use timeline

See the Pen RNbZVyQ by sougataghar47 (@sougataghar47) on CodePen.

   here is the codepen

Posted

Hi,

 

Again please don't post asking to get help, you posted on a Sunday morning, so you can expect that some delay in getting an answer, but you will get an answer. Also you have to consider time zone differences.

 

The main issue here is the way pin spacing works and the fact that your sections' height is not 100% of the screen height, so you get that extra space after the element you're pinning. In order to avoid that you have to wrap all those section in a common parent and pin that parent element as show in these demos:

See the Pen qBLRzVX by GreenSock (@GreenSock) on CodePen.

 

See the Pen ZEVpqjb by GreenSock (@GreenSock) on CodePen.

 

Here is a fork of your demo:

See the Pen MYgEjpr by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

  • Like 1
  • 2 weeks later...
Posted

Hi , thank you so much ❤️

  • Like 1

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...