Search the Community
Showing results for tags 'issue help please'.
Found 8 results
-
issue help please GSAP horizontal scrolling slider issues with vertical scroll
CamelCase posted a topic in GSAP
Hello, I'm new to the GSAP library, I've been using it for 3 days now and I'm having some difficulties implementing what I want to create. I've read several topics hoping to find a solution to my problem, but I haven't managed to solve it on my own. To get to the point! I'm trying to make a horizontal scroll slider with several possible user interactions, namely the possibility of dragging elements to scroll, the possibility of scrolling via buttons on the right and left of the screen and finally the possibility of scrolling elements with the mouse wheel. My slider seems to be synchronized with the vertical scroll, but the latter scrolls even before the element is visible on the screen, which produces a rather confusing effect. Is it possible to freeze my slider so that I can scroll left or right only when the slider is visible on the screen, or when my mouse is over it without taking vertical scrolling into account ? I've put together a codePen to give you an idea of what I'm working on and the code I've got so far. Have a nice day, Laura
-
Scale/Movement/Animation issue with horizontal movement on window resize
Audi0031 posted a topic in GSAP
Hi there! I have tried around with GSAP and ScrollTrigger, and I got it to work essentially. The only issue I am facing now is that when I resize the window the end position of the horizontal animation of the 3 green "rectangles" a bit further down in my shared codepen, their end position does not match the desired position anymore. The end position should be that they are centered in the middle of the window. Without resizing it works. Might be some html/css interference, I am new to all this, I am not sure what the problem is. Does anyone have an idea how to solve this? Also, ignore the messy html and css code Thanks in advance! -
When I'm scrolling my animation, one part of it is randomly jumping from one tween to another I have this issue just in one part of an animation. Here is my timeline configuration .timeline({ paused: false, scrollTrigger: { trigger: generationRef.current, //markers: true, scrub: 0.5, start: 'top top', end: () => '+=' + window.innerHeight * animationHeight, pin: true, pinSpacing: false, invalidateOnRefresh: true, refreshPriority: 1, }, }) It's jumping somewhere at this point: .to( getGsapSelector('GSAP_GENERATION_BAR_ASTRONAUT_FINAL'), { visibility: 'visible', translateX: '-63%', translateY: '-36%', duration: 2.5, scale: 1, opacity: 1, }, `${scroll5}+=2.1`, ) And it happens only on mobile device I'm completely new to gsap and such animations so I'm just stuck
-
I am creating website in Astro framework in which some content is coming from Contentful CMS. I am using GSAP in it and apply animation to almost whole website. But I am coming across one issue several times that, animation triggered way previously than defined measurements. Before even coming in the view-port the animation start and end. Then after refreshing the page two three times, it get correct, but again when come to same page again, issue happens. I read some solutions on same and apply like, settimeout and refreshPriority:1 to scrolltrigger, but nothing works. I dont have codepen example, because the issue is not coming everytime, but only when several scrolltriggers is use. Please help.
-
const cardsRef = useRef(null); useEffect(() => { const cards = Array.from(cardsRef.current.children); const timeline = gsap.timeline({ defaults: { duration: 3 } }); gsap.set(cards, { opacity: 0, x: 500 }); cards.forEach((card) => { gsap.to(card, { x: 0, opacity: 1, duration: 1, ease: "ease-in-out", scrollTrigger: { trigger: card, start: "top 60%", end: "+=400", scrub: true, }, }); }); }, []); Here is the code I am working with Next.js the the start market is going above the element and when we inspect the element it comes to the place first image is without inspect when first page load notice markers when we inspect the marker comes in place why it is happening please help this is my first post apologies for any if the post is not according to guidelines
-
I need help, I am not able to use animation in multiple routes in Angular
Mishan posted a topic in GSAP
It is not working properly. Let me explain here is code https://github.com/mishangoti/scroll-component here is video explanation of the issue https://www.awesomescreenshot.com/video/2250268?key=4b667fca8dbad42e89d408e58a1b2034 1) what ever page route I refresh, animation on that page work very good, but when I navigate to other route from that route it does not work properly, However if I refresh that route it works good but in other route it does not work as desired. I have given video link for more detail explanation. Please help me solve this issue, I can't solve it by my self. 2) when i switch route for few times all pages animation start working, but it did not work when i refresh and switch route at first time it did not work, then i switch routes few time than animation start working. Contact: https://api.whatsapp.com/send?phone=919429011743&text=HI&source=&data=&app_absent= Please contact me if you know the solution. -
I'm trying to build and deploy my project in Gatsby but can't figure out how to solve this problem. Error seems to be made by ScrollTrigger. I tried to fire animation in if (window) statement as well as if (document) but it also generates error. Does anyone know what should I fix?
-
Issue with TweenMax scaling my image while my css blur filter is animating
hyconnect posted a topic in GSAP
My image is scaling while I have a CSS filter animation running. I am running a filter blur on an image so that as the images scales, the images become blurred. There is a strange back-shadow inset appearing as the images scales and the image seems to shake. I'd like to get rid of the box-shadow and the shake if possible. Any push in the right direction will be much appricated. Thanks!
