Jump to content
Search Community

Search the Community

Showing results for tags 'astro'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Found 4 results

  1. eb4

    GSAP correct location Astro?

    Having a difficult time with placing gsap plugins into a src/gsap folder, JavaScript should be here because Astro framework can bundle JavaScript for performance benefits, have benefit of tree-shaking, code-split, and will be optimized and processed by Vite, Astro's build system. But this is causing lots of errors vs a public/gsap folder where it is out in the open. I am not doing it via npm pkg, w. the paid plugins I have that is a sh-tshow, and I have to still put them somewhere. where does this go? the Ai's are split on where. thx
  2. Hi, this is my first question. I'm new to both gsap and astro js. Im currently using ScrollTrigger to change the body function each time I reach a specific section. This is in my homepage, and I use <viewTransition/> from Astro. The thing is when I go to /blog and then come back, this scrolling behavior is not there. import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); const isBlackMode = (element: Element) => element.classList.contains("dark"); const generateAnimations: ( isDarkMode: boolean ) => globalThis.ScrollTrigger[] = (isDarkMode) => { return gsap.utils.toArray("section").map((elem) => { let color = (elem as Element).getAttribute( isDarkMode ? "data-color-dark" : "data-color" ) ?? (elem as Element).getAttribute( !isDarkMode ? "data-color-dark" : "data-color" ) ?? "#fff"; return ScrollTrigger.create({ trigger: elem as Element, start: "top 50%", end: "bottom 50%", onEnter: () => gsap.to("body", { backgroundColor: color, duration: 1, }), onEnterBack: () => gsap.to("body", { backgroundColor: color, duration: 1, }), }); }); }; // Observer for the <html> element, in case there is a class name change const htmlElement = document.getElementsByTagName("html")[0]; let currentModeIsBlack = isBlackMode(htmlElement); //To cancel the animations when there is a theme change let backgroundColorAnimations: globalThis.ScrollTrigger[] = generateAnimations(currentModeIsBlack); const observer = new MutationObserver((mutationsList, observer) => { for (let mutation of mutationsList) { if ( mutation.type === "attributes" && mutation.attributeName === "class" ) { if (currentModeIsBlack === isBlackMode(htmlElement)) continue; currentModeIsBlack = !currentModeIsBlack; backgroundColorAnimations.map((animation) => animation.kill()); backgroundColorAnimations = generateAnimations(currentModeIsBlack); } } }); const config = { attributes: true, attributeFilter: ["class"] }; observer.observe(htmlElement, config); document.addEventListener("astro:before-preparation", () => { backgroundColorAnimations.map((animation) => animation.kill()); }); The last eventListener is added to remove the animations, otherwise when I visit /blog in light mode the navbar doesn't change to de "dark:" classes in tailwind. This behavior doesn't replicate when I visit /blog being in dark mode. I'd really appreciate any hint
  3. Hi there! I'm using astro + https://vuejs.org/ components and swup.js for page transitions. I'm also using GSAP for animations I've found a problem while navigating. On first load, text in "TransformAnimation.vue" prints with animation and everything looks and works cool. If I then go to some other page (About, blog..) the text disappears even though js runs and works correctly I thought it was because of swup, but I've seen that if I comment/delete the SplitText GSAP part, the text always appear... I don't get why my GSAP code is deleting the text? :/ I leave a minimal demo(thanks @GreenSock): https://stackblitz.com/edit/testing-astro-swup-vue?file=src%2Flayouts%2FLayout.astro,src%2Fpages%2Findex.astro,src%2Fpages%2Fabout.astro,src%2Fpages%2Fblog%2Findex.astro,src%2Fcomponents%2FTransformAnimation.vue,src%2Fcomponents%2FHeader.astro Thanks!
  4. EdoRaba

    ScrollTrigger Video Animation - Astro

    I'm building a site using the Astro framework, where there will be video animations on scroll. Unfortunately using this framework it is not possible for me to create a demo on CodePen but I recorded a video to show the problem (here is the link to the site in production). The problem is that sometimes when I refresh the page the second section overlaps the first after a slight scroll (you notice when the error occurs because you see the "start" marker of the second section just below the first section, and therefore before the "end" marker of the first section). In the video, from seconds 01 to 07 the site loaded ScrollTrigger correctly, while from second 08 onwards, after the refresh, as you can see, the second section ends above the first, before it can finish scrolling. Do you have any idea what it could be even without having a demo? is this a known scrollTrigger issue or can it be caused by the framework? This is the index.astro: --- import Layout from '../layouts/Layout.astro'; import VideoScroll from '../components/VideoScroll.astro'; --- <script> gsap.registerPlugin(ScrollTrigger); </script> <Layout title="TUC"> <main> <section class="container relative min-h-screen py-6 mx-auto" id="home"> <VideoScroll client:load section={1} main="Hello TUC" title="LOREM IPSUM" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." video="/video/esploso_edit.mp4" /> </section> <section class="container relative min-h-screen py-6 mx-auto" id="technology"> <VideoScroll client:load section={2} main="All in one" title="LOREM IPSUM" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." video="/video/sedile_edit.mp4" /> </section> </main> </Layout> And this is how I created the components (.astro): --- export interface Props { section: number; main: string; video: string; title: string; description: string; } const { section, main, video, title, description } = Astro.props; --- <script> class VideoScroll extends HTMLElement { constructor() { super(); // Read the message from the data attribute. const section = this.dataset.section; const IntroVideoRef = document.getElementById(`section-${section}`); const videoRef = document.getElementById(`video-section-${section}`); videoRef.onloadedmetadata = function() { const pauseVideo = () => { videoRef.removeAttribute("autoplay"); videoRef.currentTime = 0; videoRef.pause(); gsap.delayedCall(4, () => ScrollTrigger.refresh()); } if (videoRef) { pauseVideo() } const videoDuration = this.duration; ScrollTrigger.create({ trigger: IntroVideoRef, scrub: true, pin: IntroVideoRef, start: '-100', end: `+=${videoDuration * 300}`, markers: true, onUpdate: function(self) { if (videoRef) { const scrollPos = self.progress; const videoCurrentTime = videoDuration * scrollPos; if(videoCurrentTime) { videoRef.currentTime = videoCurrentTime; } } }, }); console.log(videoTime) }; } } customElements.define('video-scroll', VideoScroll); </script> <video-scroll data-section={section}> <div class='w-full h-full hyperboards-container min-h-[200px] md:min-h-[300px]' id={`section-${section}`}> <div class='flex justify-end w-full translate-y-[30px] lg:translate-y-[70px]'> <h2 class='text-4xl font-bold md:text-7xl text-grey'> {main} </h2> </div> <div class='grid grid-cols-1 gap-4 md:grid-cols-12'> <div class='w-full col-span-1 col-start-1 overflow-hidden rounded-xl video-col md:col-span-7 md:col-start-2'> <video muted playsinline autoplay disableRemotePlayback id={`video-section-${section}`} class="min-h-[200px]"> <source src={video} type="video/mp4"/> </video> </div> <div class='col-span-1 section-text md:col-span-4'> <h4 class='bold text-[25px] text-white'>{title}</h4> <p class='light text-light-grey'>{description}</p> </div> </div> </div> </video-scroll> <style> .section-text { display: flex; flex-direction: column; justify-content: flex-end; } </style> You will probably have to refresh a few times to get both versions (working and not working).
×
×
  • Create New...