Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'scrolltrigger'.

  • 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...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. I am toggling class at box-container (black borderbox on left) based on selector's (color boxes) start and end point while scroll. I try to find a way to avoid toggleClass when distance between next start point and current end end point is too short. ( want to implement toggleClass only if this distance is larger than box height ) **** Screenshot that issue happened (passed end and about to pass next start) **** I was trying to achieve this with scrolltrigger's callback functions but it was too complicated and failed to get the distance between endpoint and next start point.
  2. Firstly, thank you team (and others) for your quick replies. The codepen tutorial was a lifesaver. Here's my issue: I'm trying to make a puk decomposition on scroll similar to the glock demo. https://codepen.io/GreenSock/pen/MWaWPmG I have the animation working https://codepen.io/Designgeekstudio/pen/eYEWyya but when I apply scrub: "true". I have no control and the tweeting and easing goes away. https://codepen.io/Designgeekstudio/pen/KKvmZQr
  3. Hi all, I've been struggling to use scrollTrigger effectively and I'm pressed for time. I've tried to mimic the glock demo https://codepen.io/GreenSock/pen/MWaWPmG however I didn't get the results I needed. I have a unique ask for a decomposition on scroll for a vaping device. See attached mp4. If this is a doable, let's connect on more details (quote, assets, timing, etc.) Apologies for the huge mp4. Puk_Explosion.mp4
  4. Hope you have had a great weekend guys I´ve already done some coding on codepen > using the amazing scroll trigger but I need help to finalize the code and make the scroll trigger & parallax nice and smooth if possible. Kind regards from Denmark. Question > is it possible for gsap to bend / warp the images as you scroll like on this awesome website? > https://kacper.ch/ Inspirational codepen > https://codepen.io/GreenSock/pen/wvMeNee
  5. Wussup, GSAP! I`m experiencing some issues with snapping. My snap performs very laggy fo no reson. Here is my ST code: Here is an example of this snap performing at chrome mobile- And this is how it performs on my desktop (Yet another Russian local browser (chromium)). I have the same experience on different browsers including Chrome itself.- I`d like to say that my code is buggy, but all actual codeOpen demo examples of ScrollTrigger`s snap (from docs) are laggy on my desktop too. I briefly looked for latest snap related topics and found this post. https://greensock.com/forums/topic/25479-full-screen-sections/?do=findComment&comment=123493 So @akapowl, you might be interested too. Your demos, where you downgraded ScrollTrigger and GSAP to v3.4.2, works perfectly fine with snapping. Any other machines I tested works good. Is there a possibility it`s related to AMD processor I`m using? Or may be it`s Windows Insider program? Dunno. Any ideas what kind of information about my system could help with solving this issue. P.S. Have no idea, how to mention concrete person at this forum correctly(
  6. Olá pessoal, estou tentando entender o motivo pelo qual a minha animação fica com essas sombras/fantasmas. Seria algo errado no meu código? import { ReactNode, useLayoutEffect, useRef } from "react"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import { Container, GroupCards, GroupCardsLeft, GroupCardsRight, Card, } from "./styles"; interface VendasProps { children?: ReactNode; } function Vendas({}: VendasProps) { gsap.registerPlugin(ScrollTrigger); // Cards let cardRef0 = useRef(); let cardRef1 = useRef(); let cardRef2 = useRef(); let cardRef3 = useRef(); let cardRef4 = useRef(); let cardRef5 = useRef(); let cardRef6 = useRef(); let cardRef7 = useRef(); let cardRef8 = useRef(); let cardRef9 = useRef(); let cardRef10 = useRef(); if (typeof window !== "undefined") { useLayoutEffect(() => { gsap.to(cardRef0?.current, { y: -830, scrollTrigger: { trigger: cardRef0?.current, scrub: 2, }, }); gsap.to(cardRef1?.current, { y: -1030, scrollTrigger: { trigger: cardRef1?.current, scrub: 2, }, }); gsap.to(cardRef2?.current, { y: -1390, scrollTrigger: { trigger: cardRef2?.current, scrub: 2, }, }); gsap.to(cardRef3?.current, { y: -1510, scrollTrigger: { trigger: cardRef3?.current, scrub: 2, }, }); gsap.to(cardRef4?.current, { y: -830, scrollTrigger: { trigger: cardRef4?.current, scrub: 2, }, }); gsap.to(cardRef5?.current, { y: -1430, scrollTrigger: { trigger: cardRef5?.current, scrub: 2, }, }); gsap.to(cardRef6?.current, { y: -1390, scrollTrigger: { trigger: cardRef6?.current, scrub: 2, }, }); gsap.to(cardRef7?.current, { y: -910, scrollTrigger: { trigger: cardRef7?.current, scrub: 2, }, }); gsap.to(cardRef8?.current, { y: -830, scrollTrigger: { trigger: cardRef8?.current, scrub: 2, }, }); gsap.to(cardRef9?.current, { y: -1430, scrollTrigger: { trigger: cardRef9?.current, scrub: 2, }, }); gsap.to(cardRef10?.current, { y: -1390, scrollTrigger: { trigger: cardRef10?.current, scrub: 2, }, }); return () => { gsap.killTweensOf(cardRef0); gsap.killTweensOf(cardRef1); gsap.killTweensOf(cardRef2); gsap.killTweensOf(cardRef3); gsap.killTweensOf(cardRef4); gsap.killTweensOf(cardRef5); gsap.killTweensOf(cardRef6); gsap.killTweensOf(cardRef7); gsap.killTweensOf(cardRef8); gsap.killTweensOf(cardRef9); gsap.killTweensOf(cardRef10); }; }, []); } return ( <Container> <GroupCards> <GroupCardsLeft> <Card ref={cardRef0} id="cardRef0"> <h4>Automatize suas vendas e escale mais</h4> <p> Envio automático de catálogos, ofertas e outras mensagens pelo WhatsApp. </p> <p> Bot disponível para responder dúvidas a qualquer momento, inclusive nos feriados e fins de semana. </p> <p> {" "} Automatize com chatbot e direcione o cliente ao chat humano quando necessário. </p> </Card> <Card ref={cardRef1} id="cardRef1"> <h4>Venda em qualquer canal e em tempo real.</h4> <p>Tenha controle multicanal de todas as suas interações</p> <p> {" "} Ofereça a possibilidade de o seu cliente comprar com você em qualquer canal, obtendo o direcionamento certo. </p> </Card> <Card ref={cardRef2} id="cardRef2"> <h4>1 número = vários profissionais no WhatsApp</h4> <p>Escale suas vendas mantendo apenas 1 número no WhatsApp.</p> <p> Uso de API oficial para mais segurança e estabilidade para o seu negócio não parar. </p> </Card> <Card ref={cardRef3} id="cardRef3"> <h4>Recuperação de carrinho abandonado</h4> <p> Pare de perder vendas por abandono de carrinho. Motive seu potencial cliente a retornar à compra, por meio de envio de mensagens via WhatsApp. Ofereça algo especial, como um cupom de desconto, para que ele possa retomar e concluir sua compra. </p> </Card> <Card ref={cardRef4} id="cardRef4"> <h4>Siga os passos e ações do seu cliente.</h4> <p>Veja quais foram os pontos de interação com a sua marca.</p> <p> Tenha uma visualização simplificada de todos os contatos do cliente em um único lugar. </p> </Card> </GroupCardsLeft> <GroupCardsRight> <Card ref={cardRef5} id="cardRef5"> <h4>Geolocalização para levar o cliente à loja física</h4> <p> Oriente de forma automatizada o seu novo cliente ou um cliente já conhecido a encontrar a loja mais próxima ao endereço dele. </p> </Card> <Card ref={cardRef6} id="cardRef6"> <h4>Comunique a disponibilidade dos seus produtos</h4> <p> Informe seu cliente avisos de reposição no estoque, novidades que chegaram no catálogo, dentre outras atualizações. </p> </Card> <Card ref={cardRef7} id="cardRef7"> <h4>Agilize respostas para dúvidas frequentes </h4> <p> Mantenha visível as dúvidas e respostas mais frequentes dos consumidores e acelere a tomada de decisão. </p> </Card> <Card ref={cardRef8} id="cardRef8"> <h4>Gerencie conversas entre vendedores e clientes</h4> <p> Direcione o cliente de forma automática para o departamento adequado e ofereça atendimento personalizado. </p> </Card> <Card ref={cardRef9} id="cardRef9"> <h4>Vitrine com avaliações sobre seus produtos</h4> <p> Disponibilize comentários e avaliações sobre experiências anteriores com seus produtos para ajudar ainda mais na conversão. </p> <p> Ofereça mais segurança para novos consumidores ao expor experiências anteriores dos seus atuais clientes. </p> </Card> <Card ref={cardRef10} id="cardRef10"> <h4>Indicação de produtos no momento certo</h4> <p> Sugira produtos complementares de forma automática, colaborando para mais compras e que se complementam. </p> <p> Entenda as preferências do seu consumidor e ofereça produtos de forma mais assertiva. </p> </Card> </GroupCardsRight> </GroupCards> </Container> ); } export default Vendas; Vale ressaltar que, estou chamando um componente dentro do outro:
  7. Hello and first off congrats on the the release of ScrollTrigger, it's definitely a game changer! Are there any plans for adding stagger in ScrollTrigger? Would be really useful for reveals on a grid, where you'd want to stagger the reveal of each element when entering the viewport.
  8. Hello everybody! I am just getting started with gsap and it is a very cool library! I am trying to change the background and text colors as well as elements in the fixed header and footer using ScrollTrigger and lcomotive. Here on the forum and on Codepen I found good examples of how to change the color of text and background using data-attribute. That's what I did https://codepen.io/Lkey/pen/xxLbZQg But what if I want to change more elements at the time of scrolling? It seems to me that the data-attribute is difficult for this ... Can I make a flow of changes for different elements in the onEnter: () => moment and in the onLeaveBack: () => moment? I also thought to create .darck-theme and .yellow-theme classes and change them at 50% scroll. But how to properly assign or smoothly change them in the moment? Will this work on the first screen? Any advice would be appreciated. thanks
  9. I am using gsap scrolltrigger to toggle a class that makes the container sticky. After the end of the animation when the class is removed it behaves weirdly. Here is the video link : https://drive.google.com/file/d/12WOmmK43dFBxvVLKuDPoAGnOAT4-b76L/view?usp=sharing As you can see in the video after the end of animation it moves it..... Is there any fix to this ? Javascript code : const canvas = document.getElementById('hero-lightpass'); const context = canvas.getContext('2d'); const frameCount = 45; const currentFrame = index => `./assets/medium_${(index + 1).toString().padStart(4, '0')}.jpg`; canvas.width = 600; const images = []; const airpods = { frame: 0, }; for (let i = 0; i < frameCount; i++) { const img = new Image(); img.src = currentFrame(i); images.push(img); } console.log(canvas.width); gsap.to(airpods, { frame: frameCount - 1, snap: 'frame', scrollTrigger: { trigger: '.sticky-wrapper', scrub: 0.5, markers: true, start: 'top 48px', end: 'center 49px', toggleClass: 'sticky', }, onUpdate: render, }); images[0].onload = render; const getheight = () => {}; function render() { console.log(images[0].naturalHeight); const h = images[0].naturalHeight; const w = images[0].naturalWidth; const aspect = h / w; console.log(aspect); canvas.height = aspect * canvas.width; context.drawImage(images[airpods.frame], 0, 0, canvas.width, canvas.height); }
  10. Hello, I just made my first steps with gsap + ScrollTrigger, but have struggled to snap to the nearest scene when two scenes are visible (see the pen in the end). That's not something unexpected, as I looped over the scenes and assigned them a snap value 1. But all the variants I tried failed (see the snapTo: 1 / (scenes.length - 1) approach: https://codepen.io/firmart/pen/mdMbadp and the snapTo: "labels" approach: https://codepen.io/firmart/pen/YzxKdgO). I'm aware of the given examples https://codepen.io/GreenSock/pen/YzyaKrq https://codepen.io/GreenSock/pen/XWmEoNg But the former seems to rely on the CSS properties scroll-snap-typeandscroll-snap-align(I believe that it can be done with gsap alone) and the latter has a hardcoded width (not sure whether it's relevant). How can I snap to the nearest scene (upper scene's end or lower scene's beginning) when the scroller is between two scenes ? Thanks
  11. hi, trying to achieve this type of horizontal scrolling like in reference by using scroll triggers and then as it continued. but its overlapping on other section . the reference site is - https://www.ics.ac.jp/jointexhibition2021/en/ please suggest me, WhatsApp Video 2021-10-10 at 11.16.00.mp4
  12. GreenSock

    GSAP 3.8 Released

    GSAP 3.8 is here, and it's packed to the brim with ScrollTrigger improvements! Highlights: containerAnimation - vertical scrolling can animate a container horizontally; now you can set up ScrollTriggers on that horizontal movement. It's like having nested ScrollTriggers! preventOverlaps & fastScrollEnd - when you jump to a section, do you have lingering animations that overlap? These features can save the day. isInViewport() - a simple way to check if an element is in the viewport positionInViewport() - find out exactly where an element is in relation to the viewport Directional snapping - by default, snapping will now always go in the direction that the user last scrolled. Much more intuitive! There's even a .snapDirectional() utility method. containerAnimationcontainerAnimation We try to keep an eye on common challenges that the GSAP community faces. A popular effect is to create horizontally-moving sections that are tied to vertical scrolling. That's simple enough with the animated horizontal "scroll" technique where a pinned container is animated along the x-axis to emulate horizontal scrolling. However, since the effect is an animation as opposed to native scroll, it's very tricky to trigger animations within this horizontally "scrolling" container. Enter containerAnimation. 🥳 With containerAnimation, you can actually create ScrollTriggers on that fake-scrolling container to detect when an element is 'scrolled' into view horizontally and then trigger an animation. Think of it like a ScrollTrigger inside a ScrollTrigger. 🤯 First, we create a linear tween to handle the horizontal 'scroll' Then we can pass that animation (as the containerAnimation) to the ScrollTriggers of tweens or timelines // keep a reference of the horizontal 'fake scrolling' animation so we can pass it around let scrollTween = gsap.to(".container", { xPercent: -100 * (sections.length - 1), ease: "none", // <-- IMPORTANT! scrollTrigger: { trigger: ".container", start: "top top", end: "+=3000", pin: true, scrub: 0.5 } }); // now let's create an animation that triggers based on the horizontal fake-scroll: gsap.to(".box", { y: -100, scrollTrigger: { trigger: ".box", start: "left center", containerAnimation: scrollTween, // <-- NEW!! } }); Check out this demo to see it in action! See the Pen Horizontal &quot;containerAnimation&quot; - ScrollTrigger by GreenSock (@GreenSock) on CodePen. preventOverlaps and fastScrollEndpreventOverlapsAndFastScrollEnd Special thanks to Creative Coding Club for providing this video. We highly recommend their courses at CreativeCodingClub.com. Take your animation skills to the next level. Scroll-triggered animations pose unique challenges. Unlike animations that play on load, you're putting control in the users' hands. They decide how fast to scroll, which direction to scroll – and by association – when the animations get triggered. With this in mind, we added two new features to ScrollTrigger to help avoid overlaps between successive non-scrubbed animations: preventOverlaps kicks in as a ScrollTrigger is about to trigger an animation; it finds preceding scrollTrigger-based animations and forces those previous animations to their end state – avoiding unsightly overlaps. fastScrollEnd will force the current ScrollTrigger's animation to completion if you leave its trigger area above a certain velocity (default 2500px/s). This property can help to avoid overlapping animations when the user scrolls quickly. We're especially excited about the UX benefits this brings. When users are in a hurry to access information, slow animation can be a frustrating hindrance to their goal. With fastScrollEnd, we can avoid wearing down the patience of task-focused users by quickly forcing animations to their end state when scrolling quickly. scrollTrigger: { trigger: ".container", fastScrollEnd: true // (default 2500px/s) // or fastScrollEnd: 3000 // (custom 3000px/s velocity) preventOverlaps: true // prevent overlaps in preceding scrollTrigger animations // or preventOverlaps: "group1" // prevent overlaps in specific group of scrollTrigger animations } You can take a look at how these new properties work, independently and in unison, by scrolling down in this demo at different speeds and toggling the options: See the Pen preventOverlaps and fastScrollEnd | ScrollTrigger | GSAP by GreenSock (@GreenSock) on CodePen. In addition to these new features we've added some handy methods to help you detect when an element is in view, and where. isInViewport()isInViewport ScrollTrigger.isInViewport() lets you find out if a particular element is in the viewport. if (ScrollTrigger.isInViewport("#selector")) { // in the viewport vertically } You can also find out if a certain proportion is in view. The following will return true if at least 20% of the element is in the viewport: if (ScrollTrigger.isInViewport(element, 0.2)) { // at least 20% of the element is in the viewport vertically } To check horizontally instead of vertically, just use the 3rd parameter (boolean): if (ScrollTrigger.isInViewport(element, 0.2, true)) { // at least 20% of the element is in the viewport horizontally } positionInViewport()positionInViewport The ScrollTrigger.positionInViewPort() method lets you get a normalized value representing an element's position in relation to the viewport where 0 is at the top of the viewport, 0.5 is in the center, and 1 is at the bottom. So, for example, if the center of the element is 80% down from the top of the viewport, the following code would return 0.8: ScrollTrigger.positionInViewport(element, "center"); For the reference point (2nd parameter), you can use keywords like "center" (the default), "top", or "bottom". Or you can use a number of pixels from the element's top, so 20 would make the reference point 20 pixels down from the top of the element. Demo See the Pen isInViewport() and positionInViewport() by GreenSock (@GreenSock) on CodePen. Directional snapping By default, snapping will now always go in the direction that the user last scrolled. Much more intuitive! Previously, it would snap to the closest value regardless of direction which could lead to annoying snap-back behavior. There's even a ScrollTrigger.snapDirectional() utility method that lets you do your own directional snapping for any numeric values. It returns a snapping function that you can feed a value to snap, and a direction where 1 is forward (greater than) and -1 is backward (less than). For example: // returns a function that snaps to the closest increment of 5 let snap = ScrollTrigger.snapDirectional(5); snap(11); // 10 (closest, not directional) snap(11, 1); // 15 (closest greater than) snap(11, -1); // 10 (closest less than) You can even use an Array of values! let values = [0, 5, 20, 100]; // returns a function that'll snap to the closest value in the Array let snap = ScrollTrigger.snapDirectional(values); snap(8); // 5 (closest, non-directional) snap(8, 1); // 20 (closest greater than) snap(99, -1); // 20 (closest less than) And more... Make sure to check out the ScrollTrigger docs for more information. GSAP 3.8 also delivers various bug fixes, so we'd highly recommend installing the latest version today. There are many ways to get GSAP - see the Installation page for all the options (download, NPM, zip, Github, etc.). Resources Full release notes on Github Full documentation Getting started with GSAP Learning resources Community forums ScrollTrigger docs Happy tweening!
  13. I'm creating a project where i need smooth scrolling as well as scroll-to function. In my codepen I've used smooth-scrollbar library coexisting with scrolltrigger's scrollerproxy() library... which works fine. But due to the scrolljaking the scrolltoplugin is not working properly. I've tried scrolltoplugin without smooth scrolling it works but I need both to work together. Is there any way to make them work together? Thanks in advance!
  14. I've been having this weird bug/ issue in combination with ScrollTrigger and routing between different pages in Gatsby. When routing to a different page while clicking on a link the animation starts before the trigger is met. So when I scroll down and expect to see blocks animate in I see blocks already in their end state. **Note: This only happens when routing to a page. If you open a page and/or refresh this doesn't happen (the normal behaviour with ScrollTrigger happens). I've made a simple example for you guys to have a look at in CodeSandbox: https://codesandbox.io/s/gatsby-gsap-scrolltrigger-issue-q19r6?file=/src/pages/index.js
  15. I got an Issue with the ScrollTrigger Method "onUpdate": I am trying to "snap" the sections on a Scroll Update (I don't want to use snap: because the user has to stop scrolling to trigger the snap and it should happen onUpdate). So If I am in section1 and trigger onUpdate and if direction === 1, then it should scrollIntoView to Section2: ScrollTrigger.create({ markers: true, id: 'section1', trigger: '.section1', start: 'top 350px', end: 'top 350px', endTrigger: '.section2', onUpdate: ({ direction }) => { if (direction === 1) { section2.scrollIntoView({ behavior: 'smooth', block: 'center' }); } }, }); The problem I am having, is that the behavior: 'smooth', is interfiering with ScrollTrigger and it's not scrolling to the center. I tried to change the direction (if direction === -1) and it is scrolling to the block, but wouldn't make sense to use. My Question is, if there is an even simpler solution or if its a bug, how can I fix it? Thanks in advance :D
  16. Hello every one , i found so trouble in use scroll trigger with react three fiber , so can any one help me ? or i have to learn some thing befor ?? i saw an example but never see what i need to do thank's
  17. Hey hi, I am completely new to GSAP world, i am trying to learn many things from forum and gsap -demo, and trying from today. this trail is about horizontal scroll, have tried from demos, my plan is to achieve scroll some thing like this header | what-we-do -> work-sec -> about | contact section but after (what-we-do) section, background colors of all sections are disappearing!! have achieved horizontal scroll but its not in a proper way, Please check my code and let me know where did i missed things??
  18. Hey guys, I'm running into problems when i scroll down or up too quickly. It must be something quite simple, I'm missing. If you scroll down slow, then box 1 appears, and then as you go further down, box-2 appears. But if you scroll down quickly, past both triggers, box 1 doesn't disappear quick enough and all the boxes appear on top of each other. I'm using fromTo's and I've tried "immediate render: false" and "overwrite" but, have not been able to work out what is causing this issue. Hope that all made sense. I've made a minimal codepen demo to show what's going on. Any help is greatly appreciated. Cheers
  19. Hi everyone, just started with GSAP two days ago! I'm having a problem with my horizontal scroll layout where sections are overlapping each other to an extent that you can't even view the content in them. Also, a lot of margins are being added. If I put real data in these sections, the last section disappears from the viewport (due to margin/padding being added) What I want to achieve is horizontal scroll but sections should respect the width and margins instead of overlapping. Please suggest me what should I do...
  20. Hey guys, Started playing a bit with ScrollTrigger and loving it, great job! Is it possible to pin elements taller than the viewport and make them scrollable though? Like this: https://abouolia.github.io/sticky-sidebar/ check out the "Scrollable Sticky Element" example, try scrolling up and down to see what I mean. Fingers crossed
  21. Banging my head a bit. I've got a few Scroll Trigger based animations on the home page of a site and it works flawlessly when in local development. It isn't until we've deployed to a production/staging environment does it break. Effectively what's happening is when we load the site on production/staging all animations run immediately. Not sure if its a component mounting issue (which would mean its not a GSAP issue) or if something is being compiled/computed differently in a live environment? Each section is setup as follows: 1. Define the animation/scroll trigger in the `mount` lifecycle hook 2. Use `$refs` to pass elements into the animation. <template> <div id="vid-container" class="h-screen w-screen bg-white"> <video @loadeddata="loaded" class="w-full fixed inset-0 duration-500 transition-opacity opacity-0" :class="{'opacity-100': videoLoaded}" src="https://player.vimeo.com/external/611257045.hd.mp4?s=785a9d52ed5d188f762436b1bb618493f784d3f5&profile_id=174" autoplay loop muted preload></video> <svg ref="mask" class="mask absolute w-full h-full" > <mask id="mask"> <rect width="100%" height="100%" fill="white"></rect> <text font-family="Bagnard, serif" font-weight="500" x="50%" y="49%" class="origin-center " text-anchor="middle" transform="scale(15)" > <tspan x="50%">Freelance</tspan> <tspan x="50%" dy="1em">Founders</tspan> <tspan style="font-size: .5rem" x="50%" dy="2em"> ↓ </tspan> </text> </mask> <rect id="bg" width="100%" height="100%" fill="#fff"></rect> </svg> </div> </template> <script> import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { CSSRulePlugin } from "gsap/CSSRulePlugin"; if (process.client) { gsap.registerPlugin(ScrollTrigger, CSSRulePlugin); } export default { data() { return { videoLoaded: false, } }, mounted() { console.log('hero mounted') let width = window.innerWidth let speed = 350 //pixels per second let endX = width let duration = endX / speed let ease = "sine.inOut" let intro = ''; if (this.$refs.mask) { this.$nextTick(() => { intro = gsap.timeline({ onComplete: () => {}, scrollTrigger:{ trigger: this.$refs.mask, start: "bottom 100%", end: "bottom 50%", pin: true, scrub: true } }); intro.to(this.$refs.mask, { scale: 5, opacity: 0, duration: 5, ease: ease }, 'intro') } ) } }, methods: { loaded() { this.videoLoaded = true; } } } </script> Staging link example: https://freelance-founders-hgc9zjyrf-progresslabs.vercel.app/ FYI - Working on a minimal example to post here shortly.
  22. Hi! How can i specify for each element start position from center block (not elements wrapper) if elements has `absolute` position I try: elements.forEach(e=>{ gsap.to(e, { ... scrollTrigger: { start: e.offsetTop, // i try ()=>return `top+=${e.offsetTop} bottom` but does't work end: "max", invalidateOnRefresh: true, scrub: 0, markers: true } }) } but see that its work slowly Can i do the same without .forEach
  23. Hi, I've been using gsap and multiple plugins over the last couple weeks. For the most part I've found my way around but been stuck on this for the past day. The pen is a minimized version of what I'm trying to achieve, which is a pinned panel that rolls through 7 sections (all full-screen), and some of the panels have a lottie animation tied to it via ScrollTrigger. I got the panel to work, but tweaking timings is getting complicated, which I'm trying to solve via using a master timeline so the timings are contained. The timeline bit seems to work but I can't seem to get lottie to fire up correctly. Also any pointers on the rest of the code is appreciated as I'm sure there's a lot to be improved. Thanks in advance
  24. In the given like you can see that the scroll animation gets stuck for ios. Working fine of android. Below is my code. Here is the site link : https://animationstest.vercel.app/work I am also attaching the video for your reference : useEffect(() => { gsap.registerPlugin(ScrollTrigger); const boxes = gsap.utils.toArray('.Work-info'); boxes.forEach(box => { gsap.from(box, { scrollTrigger: box, y: 100, duration: 1.2, opacity: 0, }); }); }, []);
  25. Hi I am new to gsap and I am unable to achieve what I want using scrollTrigger . I want the article that is not on page to revel animation on scroll but it gets finished with other animations. I already saw Most Common ScrollTrigger Mistakes but didn't got the answer that I wanted. Below is the code and video sample const Aboutpg = gsap.timeline({ delay: 0.5, ease: 'power4.out' }); Aboutpg.from('.aboutme h1', { y: 200, duration: 0.8, opacity: 0, skewY: 10, }); Aboutpg.from('.aboutme article', { scrollTrigger: '.aboutme article', y: 150, duration: 0.8, opacity: 0, stagger: 0.2, skewY: 10, }); Untitled.mp4
×