Jump to content

Search the Community

Showing results for 'page transition' in content posted in GSAP.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Is it possible to do a gsap Flip animation to do a page transition with ReactJs/NextJs ? I am struggling a little bit :p If yes can you maybe guide me on how to get started ?
  2. GreenSock

    Vue js & gsap

    Hi @Bayu. As we've tried to explain, the problem here has nothing to do with GSAP or even the version you were using. It's a Vue question. You've got transitions wired up so that Vue is dumping the elements when you go to another tab/page, so when you return it's actually creating new/different elements that don't have the animation/ScrollTrigger applied. You need to figure out how to tap into the proper Vue lifecycle hooks to set things up properly when the new elements get rendered. I have zero experience with Vue but I did some Google searching and maybe it's a matter of tapping into the transition's @after-enter and @after-leave lifecycle hooks like this: https://codepen.io/GreenSock/pen/GRBeodX?editors=0010 I hope that helps nudge you in the right direction.
  3. No, what you can do is create an element that has the same position and dimensions that it has in the next page, create the Flip animation and once that is complete make the page transition. You cannot create a Flip animation (or any animation for what matters) for an element that is not in the DOM yet. Hopefully this clear things up. Happy Tweening!
  4. Good evening to all, I am in the process of creating a website for my son. www.studioln10.com On the transition between the page "Projects" and "Musée de monaco or Musée de Saint-Gilles" I have an error "Gsap Target and I don't know how to determine which Target it is. Thank you for your help.
  5. Hi all I seem to completely stuck on what I hope is a trival mistake/issue on my behalf, but I cannot seem to resolve so any help would be greatly appreciated! Some context... I am building a site with Nuxt 2 + GSAP and working on a simple scroll interaction on the home page. It can be broken into a few small steps to help illustrate the desired outcome: A full-page splash component (logo loading animation) is `positioned: fixed; z-index: -1;` at the top of the page The inner page content is then transformed down by `transform: translate3d(0, 100vh, 0)` and on close of the splash is transformed back up to simulate a parallax effect over the splash page Then, nested inside the inner page content there are three 100vh full-bleed image sticky sections (with nested headline etc) that have predefined `width: 100%'; height: 100vh; position: sticky; top: 0;` styles making them overlap on scroll. We are then using a scrollTrigger to animate the headline and images to show and reveal on scroll i.e. hide first image when next image reaches the top (and should probably be using pinning for the sticky sections?!). My issue is that on first render/load the markers are positioned incorrectly and then work perfectly on window resize or returning to route. I seem to have determined this due to the translate set on the parent container on load (when the splash is active). I have been able to reproduce the issue in a minimal Nuxt 2 + GSAP repo here: https://stackblitz.com/edit/nuxt-starter-qp4xkc?file=pages/index.vue From what I have read in other issues, calling `ScrollTrigger.refresh()` once we know the DOM is ready and/or when the splash transition is complete, should recalculate the scrollTriggers but testing refresh hasn't resolved the issue. Nesting the `ScrollTrigger.refresh()` inside a `setTimeout()` to wait for the splash transition to end works inconsistently and doesn't feel like a production safe solution? I have also tried changing the CSS on the parent i.e. pushing down the content down using padding or margins instead of translating but the issue persists. I know from experience that's always best to go all GSAP and not mix elements with CSS (i.e. the sticky panels) but I just can't seem to get it to work.. Hoping I just have some logic mixed up and would appreciate any guidance!
  6. Thank you Rodrigo for your response. I honestly thought that your code would solve the problem but it didn't, maybe it's the code that precedes the animation. The idea of this animation is to create the illusion that the image I have selected remains as the page changes and is displayed larger on an internal page. For this what I did was to create an object when I click and disappear when I get to the internal page. This works fine but as the initial image has a hover effect that scales the image, when I create the object I have to scale it to the same size to avoid a jump between images but when I get to the internal page I have to de-scale it to normal size, this is why I want to change the scale of the image that is inside the object created in the transition. I leave a demo that I uploaded on my server (you can see an example of the problem by clicking on the first picture): https://hallnatura.com/demo/galerie-animal.html Thank you very much for your help
  7. Hi guys ! I'm trying to make a transition animation from the first screen to the second, but it doesn't work out completely. 1) How it should look like: the horizontal text scrolls to the left, reaches the vertical scroll, the vertical text scrolls (to vertical4 in the example), and then a decorative block with a white stripe goes from top to bottom, which disappears after a moment and the main section smoothly scrolls to the second one and all this time the main section is in the pin state, the user does not have to "scroll" the page. What goes wrong: a decorative block with a white strip appears, but only (!!!) after the 1 section exits the pin state and scrollTo for some reason does not work, but rolls back the previous animation ( Please help! 2) I couldn’t show this with an example, but for some reason my ScrollTrigger of the next section works locally as if the first section is not in the pin state. Why can this happen? 3) This project will have a fixed block (small picture with message), which, while scrolling throughout the document, will change its coordinate. (section 1 - init position, section 2 - smooth movement to another fixed position, section 3 - smooth movement to another fixed position) How can I implement this? Please help, I will be eternally grateful!
  8. Hi, The issue is due to the type of animation being applied to the main container of the page. Routing/Transition libraries normally demand that there has to be only one element to be animated. Hence we wrapped everything in a single DOM node. The animation we're using actually applies transforms to that element which causes issue with pinning in ScrollTrigger. https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children" There are two possible solutions for this. Use pinReparent on all your ScrollTrigger instances that reside inside a transformed parent or set a default for all ScrollTrigger instances: ScrollTrigger.defaults({ pinReparent: true, }); If using that approach is not an option what you could do is on the transitions configuration remove all the styles applied by GSAP on the element being animated: const onEnter = (el, done) => { gsap.set(el, { autoAlpha: 0, scale: 0.8, xPercent: -100 }); gsap .timeline({ paused: true, onComplete() { toggleTransitionComplete(true); // Removes all styles (including transforms) // once the page/route transition is completed gsap.set(el, { clearProps: "all" }); done(); }, }) .to(el, { autoAlpha: 1, xPercent: 0, duration: 0.25 }) .to(el, { scale: 1, duration: 0.25 }) .play(); }; Both options are equally valid and should work without any issues. Hopefully this solves the issues you've been experiencing. If you have any other question/issue let us know. Happy Tweening!
  9. I think the reason for why it doesn't work properly after a page-transition, boils down to the fact, that for a certain period of time within barba's lifecycle, both, the old and the new container will live together in the DOM. Now while you are initiating your new locomotive-scroll instance everytime with reference to the new barba-container, your scrollerProxy is only being created with reference to '.smooth-scroll', which will be available in both, the old and new container at that time - and since the old container sits above the new in the DOM tree at that time, you will be referencing the old container's .smooth-scroll with that. You can check the difference between the two elements you are targetting by logging out console.log(smoothScroll.parentElement.getAttribute('data-barba-namespace')) vs. console.log(document.querySelector('.smooth-scroll').parentElement.getAttribute('data-barba-namespace')) in your initSmoothScroll function. So you can either simply just change the element you are targetting in your scrollerProxy to be the same you are targetting when creating your locomotive-scroll instance, or alternatively just remove the old barba-container at the proper time since you don't need it for your type of page-transition anyway. Both options resolved things for me. Hope they do for you, too. Thanks for the heads-up btw @Cassie - was scratching my head for a minute or two there, before I saw that.
  10. Hello, I came across a website from the Showcase on GSAP, and I really liked the animation they'd done when switching/changing between the pages, and below is the website for the reference. https://andersonsupply.com/ I tried to checkout the GSAP Products but unable to find what kind of Page Transition they'd used using GSAP, can anyone help me with that how I can add the similar Page Transition in Nextjs using GSAP? waiting for your valuable reply, Regards, Dhaval
  11. Hello there and sorry if my question is basic, I am a newby in JS / GSAP. I have a main page with an 'image' menu with links. I want to animate that image for it scale down and go up when a link to page 2 is clicked, as a transition. Here is my code below. The problem is that the animation starts on the main page, which I don't want. const tl = gsap.timeline({ paused: true }); tl.to('image', { duration: 1, scale: 0.2, x: -1, y: 0 }); window.addEventListener("load", function () { tl.play(); });
  12. Hi again). Made a small example on codesandbox. The example clearly shows that when scrolling on a light section, the class is not added to the header, but this is only part of the problem. Also, it should all work after barba transition from the about page to the home page.
  13. Hey Guys, I was really hoping someone could help, I've been searching for hours, I'm trying to do what looks to be like a video page transition and was hoping if it can be done with GSAP or what you'd recommend The transition can be seen on this website: https://www.netflixshadowandbone.com/ If you 'Enter' and click into either 1 of the 4 selections - top right eagle, you will see a 'smoke' like page transition that looks amazing I see the video in the source linked: https://www.netflixshadowandbone.com/uploads/version/1620299202277/static/webgl/transition/mask_smoke_1080p.mp4 But I cannot seem to find out how they are doing this transition I really appreciate you guys for helping so much, this is nothing I've seen on any website
  14. Hi, Here is the example for page transitions in Nuxt3: https://stackblitz.com/edit/nuxt-starter-bthjlg As you can see it follows the same pattern as this example in Vue3: https://stackblitz.com/edit/vitejs-vite-w8wtpj The only difference is that in Vue we have a top level file (App.vue) where we setup all our transition code for the entire app. In the case of Nuxt there is not such option as we have to configure it on each page using the definePageMeta global method. In order to not repeat the same code over and over I came up with the helper file that has all the configuration and that uses the transition composable, which keeps pages files small and nice, at least in that particular aspect. The transition purposely affects the position of the page container on the Y axis as well as it's scale, in order to require the animation to be completed to create the ScrollTrigger instances, so everyone can see that particular pattern. Of course if your transitions don't change any of that there shouldn't be needed, but just in case is a good idea to have it there so everyone can see the best possible approach. Finally if someone has an idea to better improve this or any other example, we're all ears as we look forward from your inputs and ways to make things as good as possible. Hopefully these are helpful and let us know if you have any comments, questions or issues. Happy Tweening!
  15. Hi, I have i little problem with switching to gsap v3 I have a lot errors in console log of GSAP target not found and error when trying to change attr of element. I created animation last week in old GSAP and everything worked fine. Links to site https://www.identitet021.rs/home/ and https://www.identitet021.rs/development/ site is not live yet. Animation works on home page but it doesnt work as it should, minor problems. Animation on Development page and other functions doesnt work. Little help in transition to GSAP v3 is needed. Great job on GSAP v3. Thanks, Dejan
  16. Hi! This is my first post. I'm Luigi and I found out GSAP and this forum recently. 🙂 I want to reproduce the page transition animation triggered by the user when clicks on "Previous" or "Next" areas at this website: https://headline.vision/2022_08_29_B Debugging the frontend code, I discovered that the animation was created with GSAP. So I started to search code snippets on websites such as Codepen but right now the most similar (but not enough for my desiderata) stuff I discovered it's this: https://greensock.com/forums/topic/17845-melting-background-animation Do you know how to get the code for a similar animation or recreate it from scratch? Thank you in advance!
  17. A quick explanation of the obstacle I want elements on the page to appear in a choreographed manner. For all elements that load in the viewport, I can just create a timeline. But as we scroll down, elements would transition when they hit the specified trigger point. So rather than choreographed to animate in a particular sequence, they just all load when they hit the trigger point. Let's say that 10, 11, 12, 13 require a scroll down to see. I want to them to choreograph their transition from opacity 0 to 1, starting from left to right, top to bottom. Each component's elements fading in, one component after the other. Just as an example. ______ My initial thought was to make a master timeline for the template. Then use a if/else statement to determine whether a component is in the viewport. Components in the viewport would be added to that master timeline. Not sure if this would work. I need heeelp _______ ps, just consider this a wireframe. the squares stand in for div, img, p, h2, etc
  18. I am looking for a page transition effect when clicked on a smaller image and then that small image is going to animate and cover the full screen and now will behave as a different page... Refer to this portfolio website :- https://www.chriswilcock.co/ (Just click on any image like: Discovery Land co, Bear Grylls, etc..), a liquid kind of page transition happens, if you look at the url while transitioning, it is actually a different page... Addon:- I think this page is using barba.js for the transitions, but please help me, because I want to create a similar transition, and I am also using locomotive scroll on my website.
  19. My goal is to use ScrollTrigger to animate elements on entering page. When I navigate to another page I want to animate the elements off to get a nice page transition. So, when I enable pageTransition in nuxt.config.ts in your GSAP & Nuxt 3 Starter and navigate through the pages, the scripts don't work anymore. export default defineNuxtConfig({ app: { pageTransition: { name: 'page', mode: 'out-in' } }, }) Do you have a solution for this or an alternative to get the desired behaviour?
  20. i was trying to achieve the page transition in reactjs just like https://www.reed.be/en/work in this site. When clicking on the image it resizes from the current position to next page. that kind of animation was i looking for. Can anyone help me?.
  21. I forked this pen from GSAP Infinite Scrolling Text, and just simply generate a 10 more random row, and when I render them, I can see that my CPU is really2 high Is there anything that I should know about, this animation should be quite light right //Change this to 30 to see the CPU is crying :( const total_text = 10; I left one row for you guys to inspect, later I will generate all Scrolling Text programmatically This is not the final form of the animation, I am planning to make a 3D Steps comprised of these text, and use them to fully close a section and then fully reveal another section ( sort of a full page transition ), and if this kind of animation is taxing the CPU this much, I might not be able to continue with my design plan Please help
  22. Hey @svenilla, thanks for reporting (again 😆)! So the issue is that the state is being updated only on the transition and not when the page is loaded for those routes. The solution is different in Vue and Nuxt, because Nuxt uses <suspense> for routing so when the app.vue file is mounted the state changes but the page/view component is not rendered yet, so when it renders the watcher doesn't trigger. Since Nuxt uses suspense, when the component renders the watcher will be ran again but in Vue that doesn't happen, that's why we have to add the immediate flag in the watch hook: watch( [() => transitionState.transitionComplete, main], (newValue) => { if (newValue && main.value) { ctx.value = gsap.context((self) => { const boxes = self.selector(".box"); boxes.forEach((box) => { gsap.to(box, { x: 150, scrollTrigger: { trigger: box, start: "bottom bottom", end: "top 20%", scrub: true, }, }); }); }, main.value); // <- Scope! } }, { immediate: true, } ); That forces the execution of the watcher hook when the component is created. That brings another issue though that the ref is not yet available, so we have to watch that as well. Hopefully this works as expected. Happy Tweening!
  23. (I am a Japanese speaker, translated by deepl.) We have confirmed a bug in the execution of ScrollTrigger when pageTransition is set. My solution is one of the following. 1、Do not use pageTransition. 2、Delay the execution of the ScrollTrigger in onMounted longer than the time required for the pageTransition (use setTimeout). 3、Set page-key in the NuxtPage component in app.vue. 4、Set definePageMeta key in each page component. -- postscript -- However, I found that changing the page-key using methods 3 and 4 causes another problem with the pageTransition. I just found another solution! 5. create plugins and use Nuxt's 'page:transition:finish' hook.
  24. Hey everyone. I'm new to React and Greensock and I just can't seem to figure out a simple transition. I've checked the forums and spent hours on Google but nothing seems to work. I'm hoping someone here can help out. I've got a React site that changes the main element with navbar clicks firing the handlePageChange function and passing in the new page. I just want a smoother transition between the current page and the new page but I can't seem to get anything to work. I was hopeful when I found out I need to take React out of strict mode that it would solve some problems, but no luck. I'm sure there's a very simple solution that I'm just missing in my inexperience. I recognize the gsap animation I've included won't work since I haven't defined what oldPage is in my script. I've tried so many permutations I wasn't sure what to put in the small demo. Maybe that's the ultimate question: how do I define the element to be animated when it's an entire React component? Maybe?
  25. I'm having 1 issue with the combination of HighwayJS + Scrolltrigger. I wanted to demonstrate this issue in Codepen, but I can't figure out how to simulate the problem in Codepen, because I need to have a page transition in place and therefore I need 2 pages. Tried to do this with 2 codepen's. But it doesn't seem to work. So I will post the links to this specific project and a screencap to demonstrate the problem. The problem is as follows; On a homepage I have a carousel. Carousel functions with ScrollTrigger. It's pinned once it hits the top of the viewport. This all works fine when you land directly on the homepage. But as soon as you land on the homepage coming from another page within this website it doesn't function properly. The whole carousel disappears when it's Pinned (Fixed). The internal page transitions are without a refresh with the help of HighwayJS The whole problem doesn't occur when I change the pinType to 'transform'. But this pinType has a weird effect to the UX. It's bouncing a bit scrolling through the slides.. Looks fragile. To replicate the issue Start here > https://favelastreet.flywheelsites.com/about-us/ Open nav en click on "Favela Street" to go to the homepage, scroll down, once you see the carousel, it disappears when it hits top of the viewport. Screencap > Remark I kill all Scrolltriggers. I also use this script in order to refresh all Scrolltriggers as well. H.on('NAVIGATE_OUT', ({ from, trigger, location }) => { ScrollTrigger.getAll().forEach(st => st.refresh()) ScrollTrigger.clearScrollMemory( ) ; }); ScrollTrigger part of the Carousel (carousel itself is SwiperJS) this.carouselST = ScrollTrigger.create({ trigger: ".js_container", pin:true, start: "top top", // pinType: 'transform', >> If this line is uncommented the carousel works fine end:'+='+ (window.innerHeight * 2) + 'px', onUpdate: (self) => { const currentSlide = this.swiperImageCarousel.realIndex + 1 if(self.direction === 1) { if ((self.progress * 100) > (percentage * currentSlide)) { this.swiperImageCarousel.slideNext(500, false) $('.js_carouselIndicator').removeClass('-active') $('.js_carouselIndicator' + this.swiperImageCarousel.realIndex).addClass('-active') } } else if(self.direction === -1) { if((self.progress * 100) < (percentage * currentSlide)) { this.swiperImageCarousel.slidePrev(500, false) $('.js_carouselIndicator').removeClass('-active') $('.js_carouselIndicator' + this.swiperImageCarousel.realIndex).addClass('-active') } } } }); Page Transition // File: custom-transition.js // Import Highway import Highway from '@dogstudio/highway' import gsap from 'gsap' import Experience from "../Experience"; class DefaultTransition extends Highway.Transition { // Built-in methods in({ from, to, trigger, done }) { // Get color theme of next page const themeColors = to.dataset.theme const colors = themeColors.split("_") const tlPageTransition = gsap.timeline() // Set new page to current Scroll position tlPageTransition.set(to, {y:window.scrollY}) // Slide in New Page this.experience = new Experience() this.responsive = this.experience.responsive let slideParam = -50; // Slide to the left tlPageTransition.to('#js_wrapper', {duration:2,xPercent:slideParam,ease:"power3.inOut", onComplete: () => { // Set the Wrapper to 0 on the X axis and remove the old page tlPageTransition.set('#js_wrapper', {xPercent:0,onComplete: () => { from.remove() }}) // Position new page back to top and instant scroll back to top tlPageTransition.set(to,{y:0, onComplete:() => { window.scrollTo({ top: 0, behavior: "instant" }) done() } }) }}) // Set new colors tlPageTransition.to('#side',{duration:1, color: colors[0]},'-=1') tlPageTransition.to('.js_openNav',{duration:1, backgroundColor: colors[0]},'-=1') tlPageTransition.to('body',{duration:1, backgroundColor: colors[1]},'-=1') } out({ from, trigger, done }) { done() } } // Don`t forget to export your transition export default DefaultTransition;