How to scale smoothly the container while scrolling using scroll trigger

[vinayskolkare]

See the Pen zYbVrbK by popjrluq-the-selector (@popjrluq-the-selector) on CodePen

See the Pen VwNvVWP by popjrluq-the-selector (@popjrluq-the-selector) on CodePen

[mvaneijgen]

Quote

How to set a fixed position for two multiple div at same time on first scroll trigger, Please help

Same as already posted on your topic yesterday. 

Quote

You have to make sure that everything you want to pin is inside a container that you use as the pin container. 

So wrap everything in an element called .pin and use that as the element in the pin property eg pin: '.pin'.

 

[vinayskolkare]

How to pin and fix the two elements on scroll, using scroll trigger
 

 

See the Pen GReVmMY?editors=0010 by popjrluq-the-selector (@popjrluq-the-selector) on CodePen

[mvaneijgen]

Hi @vinayskolkare, why do you keep making new topics with the same questions? It is much easier for you and us if you keep the questions to the same topic, so there is some progress you can track.

 

What has not been answered in your previous topic? I do recommend providing some more feedback with your question, eg what elements are not working? What are there class names, please explain what are the elements doing now and what you want them to do instead. 

 

Again please keep the questions focused to one topic at a time until your question has been answered and the topic can be marked as complete

[vinayskolkare]

Hi

 

As mentioned pin topic i have used it but not working i am not able to pin the container to the top on first scroll, 

[mvaneijgen]

Please load all the plugins in your demo, so that we only have to check what is going wrong and not also have to fix the pen first.

 

Don't set elements to position: fixed with CSS when working with ScrollTrigger use pin: '.container' to let ScrollTrigger handle that for you. To me this pen seems to do what you are asking. If not please be more clear in what it is it is doing now and what you want it to do instead. 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.can help you? 

 

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

 

 

[vinayskolkare]

Hi,

As per the gsap community  forum given answer,  i have done the change in my project, but still i am not able to fix some issues issue is: when i scroll at second point the container has to be scale should start and fort scroll it scale to 1.1 to fill the screen , below i have shared codepen   please take a look into that and let me know what i am missing there

 

.

 

[mvaneijgen]

Please keep the question focused to one topic at a time instead of creating new once with each question.

 

You could look in to the Flip plugin, but easier is to create your image as big as you want it to be and then scale it .from() some smaller scale. So in your CSS I've removed width: 1320px; from .imgOwl to make it 100% width, then in your last tween I've set .from() scale: 0.8 (you can change this value to what ever you fits your project best). Hope it helps and happy tweening! 

 

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

[vinayskolkare]

 

Hi, 

As per the gsap community forum given answer,  i have done the change in my project, but still i am not able to fix some issues.

At the first scroll I want the image should but the container should remain constant. And at the second scroll I want the container to start expanding till fourth scroll and fix the header to top position. During the second scroll to fourth scroll the edge of the curve should be straightened.

As I'm unable to be and tried my best, I request you to suggest your thoughts on this.

[mvaneijgen]

There is no first scroll or second scroll in ScrollTrigger. The animation you make gets hooked to the scrollbar of the browser, so if you scroll 10% the animation is also at 10% of its progress.  

 

If you don't want that ScrollTrigger will not be the right fit for your project. If you want to do specific things like that you'll have to move your project to the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/. Here an example that scrolls to labels on a timeline, you can scroll as much as you like, but it only goes to the next label in the timeline and until the animation is done will it go to the next label.

 

See the Pen GRzrPPy by mvaneijgen (@mvaneijgen) on CodePen

 

And here an example that mixes normal scroll with the Observer plugin

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