scrolltrigger How i can make this king of animation on scroll Trigger ones

[rajavat]

 

I have image sequences for logo 

 

 

 

 

[mvaneijgen]

Hi @rajavat welcome to the forum!

 

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

For this effect our Flip plugin might help check out out  https://gsap.com/docs/v3/Plugins/Flip/

 

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

Here is a starter template which loads all the plugins 

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

 

Hope it helps and happy tweening! 

 

[Rodrigo]

@mvaneijgen is right the Flip Plugin is definitely what you're looking for, check these demos:

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

 

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

 

Also there are more in our codepen collection:

https://codepen.io/collection/nqvwmG

 

Finally be sure to check our demos hub:

https://demos.gsap.com/

 

Happy Tweening!

[rajavat]

@mvaneijgen and @Rodrigo 
thankyou for your response

 

Could you please help me with adjusting the image size? The image I am using in this code is currently much larger than required.

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import GSAP as shown in the Install Helper in our Learning Center : 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[rajavat]

how can i adjust the size of the image i use 3 different images.

 

I want image position initially in center of the screen

See the Pen XJKEvEo by _dityarajsingh (@_dityarajsingh) on CodePen.

[mvaneijgen]

3 hours ago, rajavat said:

I want image position initially in center of the screen

That is working right? What is currently the issue and how can we reproduce the issue?

[Rodrigo]

The issue is quite simple actually. In your CSS you have to set the logo container in the hero section to be centered in that particular section and also set the image size. For example our demo has these styles in place for the hero section:

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

That ensures that the logo in that section is centered, then the Flip Plugin will place the header logo to fit the hero which is centered.

 

Finally for the image size you just need to set those dimensions across different screen sizes, again that is just CSS.

 

Hopefully this clear things up.

Happy Tweening!

[rajavat]

I want were i can control this values in this whole code (uploaded Image) like

{
transform: translate(539.8px, 1125.1px) 
		   scale(32.2587, 32.3746)
}.

See the Pen XJKEvEo by _dityarajsingh (@_dityarajsingh) on CodePen.

[Rodrigo]

Those are the values the Flip Plugin is applying in order to achieve what you're asking from it. In a nutshell Flip checks the dimensions of the element you want to fit, then checks the element where you want to fit the image and based on that makes calculations and then applies them to the element. Those are the styles applied by the Plugin as the user scrolls up/down.

 

As I mentioned before the best way to control those values is through the sizes of both elements, that's why in our demo we have those dashed rectangles since those indicate the dimensions of the elements (target to fit and where it should fit) and how the Flip Plugin works, as shown in this image:

I strongly recommend you to first create the HTML and CSS that makes everything look the way you want, making both images visible at the same time and if possible put some borders around them. Right now I don't know how you're sizing and positioning things in your HTML, but you're trying to achieve the Flip animation before creating an HTML structure with styles that reflect the goal you're trying to achieve and the Flip Plugin is doing exactly what is supposed to. Just forget about GSAP, ScrollTrigger and Flip for now and focus just on the layout.

 

Happy Tweening!