Jump to content
Search Community

VecchiaPrugna

Members

  • Posts

    6

  • Joined

  • Last visited

VecchiaPrugna's Achievements

  • Dedicated Rare
  • First Post Rare
  • Reacting Well Rare
  • One Month Later
  • Week One Done

Recent Badges

0

Reputation

  1. VecchiaPrugna
    @mvaneijgen Thank you! That's what I tought but I have absolutely no idea how to make the .slider as wide as it should be. Is it possibile using only CSS? If you have any hints I'll appreciate it big time
  2. VecchiaPrugna started following Timeline optimization and performance + question on nesting , GSAP Draggable, can't drag from gaps , Draggable slider problem and 1 other
  3. VecchiaPrugna
    Let me explain. I have created a slider that overflows on the right side of the screen, a design choice you often see in lots of websites. What I want you to notice is that you can drag by grabbing (on desktop device) or swiping (on touch device) starting the motion from within the slide but also within the gaps. However, if you try dragging from within the gaps of the last slides (the ones that initially overflow) it does not work. I hope that was clear, english is not my main language. Any idea how to solve this?
  4. VecchiaPrugna
    It sured help! Thank you very much! One thing I noticed is that I should update it on window resize. Any idea on how to do that? Plus, if you have any tips on how to make it better overall I'll be so grateful
  5. VecchiaPrugna
    I was trying to figure out a way to create a slider that overflows on the right, a pretty standard design you see on lots of website. https://codepen.io/ykvdnykw-the-bold/pen/QWoezv I want to achieve the same exact thing with GSAP Draggable plugin, at the bottom you can see another codepen for my attempt. I tried setting bounds: document.querySelector(".slider-wrapper"), but the result is that it is completely stucked. Maybe it's a simple problem, but I can't come up with a solution. You could tell me to just use the SwiperJS solution I come up with, but I really want to achieve its GSAP equivalent using Draggable plugin. Please guys, help me. What I'd like to achieve: (I did this using SwiperJS) https://codepen.io/ykvdnykw-the-bold/pen/XWGvOmm
  6. VecchiaPrugna

    GSAP + Astro

    VecchiaPrugna posted a topic in GSAP

    What's the best way to integrate GSAP in a Astro project? Here's what I did: In my Layout.astro file I added a <script> where I perform the GSAP import <script> import { gsap } from 'gsap'; </script> However, If i try to use gsap in let's say index.astro (which uses Layout.astro) i get the a console error "gsap is not defined" Why? How to make GSAP globally available in all pages, componenets etc
  7. VecchiaPrugna
    Hello everyone, I'm fairly new to gsap. Here's a codepen of a simple hero animation I built. I achieved what I wanted: reveal the container using clip-path and then see all the photos in sequence with an interval of 0.5 second for each photo. Question 1: Is the thinking process correct? Can I optmize my code? What would you have done if you wanted to achieve this effect? I'm really curios on how a gsap expert would have built this animation. Question 2: since this is a intro animation, should I preload/prefetch the images in the <head> to improve performance? Question 3: If I wanted to add an effect that overlaps with this whole timeline, how should I do it? What if I wanted to add scale to my img container from 1.5 to 1 that begins at the start of the master timeline and ends when the master timeline ends? I hope I've been clear enough, English is not my primary language
×
×
  • Create New...