Pop up animation and scroll

[Clou 2 Likes (Newbie)]

Hi! I  cant find a way to start to achieve this page scroll and animation effect: https://www.we-go.it/it/team/.

 

I want to achieve the pop up animation where image grows bigger and animates to pop up with content and fixed background. Is it possible with gsap?

 

I also want to achieve the scroll image effect where images are moving on scroll...

thanks, any help would save my struggles!  

See the Pen rNqPOYZ by peva92 (@peva92) on CodePen

[mvaneijgen 2,491 Likes (Superhero)]

That seems like a perfect use case for the Flip plugin https://greensock.com/docs/v3/Plugins/Flip/, I think the animation would be even better with flip, because the example you've linked doesn't animate backwards! Be sure to watch the videos on the docs page, there is a lot you can do with Flip, but it takes some getting used to.

 

And the images are just rotating on scroll right? So, I've just add a ScrollTrigger to each image and have it rotate .from 45deg (the images from the example all start at the same angles and yours are randomly angled, so it will look different). Hope it helps and happy tweening! 

 

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

[Clou 2 Likes (Newbie)]

Thank you, i cant seem to get going: 

See the Pen rNqPOYZ by peva92 (@peva92) on CodePen

  

 

I want to use this animation to animate pop-uo :

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

 

I have also bootstrap of 3 columns whic seems to be a problem for the popup

[Rodrigo 5,888 Likes (Superhero)]

Hi,

 

I'm having a tough time loading that particular page, IDK if there is a problem with their server (my ISP is working correctly) 🤷‍♂️, but based on the setup you have my guess is that you want to expand some image to use the full size of the screen, right? If that's the case you have to create a container with a position fixed outside the smoother wrapper element and give it a rather big z-index.

<div id="smooth-wrapper">
  <div id="smooth-content">
    <!-- CONTENT HERE -->
  </div>
</div>
<img class="full-size" data-flip-id="img" src="https://placehold.co/600x600" />

Here is a fork of your codepen example:

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

 

Here is an example of an element going to and from full screen size:

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

 

Hopefully this helps.

Happy Tweening!

[Clou 2 Likes (Newbie)]

Im trying to achive that on click on image , image expands to the full size of the screen with some content under appearing image, like pop pu

[Cassie 5,650 Likes (Superhero)]

Hey! 

There's a demo in the answer above yours that should be a good starting point.

 

We're happy to answer questions if you get stuck but we don't have the resources to build out full solutions. If you want to expand and then add some content you'll need to sequence animations on a timeline or use an onComplete call in the FLIP animation.

Give it a bash, we're here to help if you get tangled up or don't understand something.

[Clou 2 Likes (Newbie)]

yes of course, im will look up tnx!

[Clou 2 Likes (Newbie)]

I have figured out, but dont quite understand the back to 1 state animation: 

See the Pen rNqPOYZ by peva92 (@peva92) on CodePen

 

 

[Rodrigo 5,888 Likes (Superhero)]

Hi,

 

I think you are overcomplicating this. There is no need for two different images, just expand the target image (clicked by the user) and be done with it.

 

This codepen example could provide a solid guide for that approach:

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

 

Hopefully this helps.

Happy Tweening!