Packo

Hey Blake! Thank you so much for the suggestion. I'll try it out! But there's a little miscomunication with the clip-path. I meant it as a plain CSS property, not a tag inside a svg tag. That's where my I was scratching my head around if it's used as a CSS clip-path as a wrapper of the image.

Yes, I am wondering if it would be possible to achieve this with clip-path, since we are using a reusable component that wraps the image like this: <div class="absolute w-full h-full md:h-[90%] hero-media"> <ShapeEllipse v-if="mask.show" :mask="mask"> <SpaImg v-if="item.image[0]" :image="item.image[0]" :lazy="lazy" :sizes="sizes" :presets="presets" class="w-full h-full object-cover object-center" /> </ShapeEllipse> </div> But since I wasn't able to find how to preserve the image scale if scaling the ellipse, I thought maybe the svg do the trick as you suggested

yeah, but how do you scale it without scaling the actual Image? If I wrap with the div the image, the image will scale as well. Maybe do it on pseudo element of the image rather?

I've been trying to achieve this effect just like as the video shows. However, I can't seem to figure out how to do it since ellipse doesn't allow to stretch fullscreen like on the video. Any ideas how to achieve this?

Thanks blake! I believe the css-tricks article will come handy!

Yeah, what I'm interested in is the technical aspect. Like how do you prevent page changing route when you click on link, but first play the animation and then as the page is ready, finish the animation. I wonder where I could find some guidenance about it because I can't find a proper way to do it

Here's an example: https://www.azzerad.com/ For a month I've been trying to learn how to do nice page transitions which look seamless like on the page above. I am using the SPA framework Nuxt.js which has a lot of stuff for this kind of transition. However, I was never successful in utilizing it perfectly. Either my content loads way too fast and the curtain effect is not there or the routing doesn't work the way I want. I tried vue's navigation guards, nuxt loader component but without a good result. Of course, for animations, I use GSAP which should help the transitioning between pages easier. Let's say I click on the link, transition in the curtain, load the content behind and then transition out. This should be doable with the timeline I believe. Does anybody know how to nail this kind of page transition? I took a look at barba.js but that is basically the same as vue's transition hooks but still, I can't use it properly for the curtain.

Hey, I have this problem, that the scrolltrigger doesn't initiate the animation when I change the routes in the Nuxt.js. When I check the console, I see that the animation initiated without me getting into the viewport. However, when I reroute again, the animation starts properly. This mostly doesn't work on 1 particular page for some reason. If I have less images, the animation starts mostly without a problem. I have this RevealFromBottom component that acts as a wrapper for whatever I put inside, mostly images and videos. I used the Scrolltrigger.batch because I have lot of images I need to initiate the animation on. I can't provide complete code, but later on I'll provide website so you can see what I mean.

I have this problem that after switching between routes, my content in some of the components becomes invisible and stay on 0 opacity. If I try to mess with the window size, the content will eventually appear but when I change the route, it stays 'invinsible' again. Here's my parent App.vue component where I put the router-view. <template> <div class="main"> <Header /> <Overlay :class="{ open: showNav }" /> <div class="burger" @click.stop="showNav = !showNav"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> <main> <router-view v-slot="{ Component }" class="view"> <transition name="slide-fade"> <component :is="Component" /> </transition> </router-view> </main> <div class="lgl" id="lgl"> <div class="legals" v-show="timeout"> <p>COPYRIGHT © 2021 Economy plus s.r.o | Web solution by DEVISION</p> <span> <router-link :to="{ name: 'CookiePage' }"> Osobnú údaje</router-link> | <a href="javascript:void(0);" aria-label="View cookie settings" data-cc="c-settings" >Nastavenia súkromia</a > </span> </div> </div> </div> </template> <script> import Header from "./components/Header"; import Overlay from "../src/components/Overlay.vue"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); However, if I don't put the router-view into transition, everything works just ok. Also I need to have the component in keep-alive tag because for some reason the scrolltrigger doesn't animate after that as well. I found that solution here on forums.

dHello, how do I wait for gsap to animate after I fetch the data from an API? Because it seems it doesn't wait and tries to animate right away and in a console I get an error, that the target wasn't found. I use a v-if for the container so if it loads the data then it should render whatever is inside. Not sure if it's the best practice, I am still learning. I don't know if the codepen will be in help but at least you can see what I mean.