Search the Community
Showing results for tags 'start'.
Found 14 results
-
First of all sorry, but I can't provide a codepen, I will try to describe the problem the best I can. Basically I have this type of structure: <div class='middle'> <div class='canvas-holder'> <!-- [Three.js Canvas] --> </div> </div> This is the CSS each of this element have: .middle { position: relative; margin-top: 7rem; } .canvas-holder { position: absolute; height: 100%; // [Three.js Canvas] canvas { position: sticky; top: 0; } } The Three.js canvas has a certain size (window.innerWidth, window.innerHeight), with GSAP I wanted to animate the position of a model inside the Three.js canvas. I wanted to move up the model by 5 when I scroll, so I wrote this: // peeler_model is the model I want to move gsap.to(peeler_model.position, { y: 5, scrollTrigger: { target: middle_div, // I wanted to take the div as a reference point for the markers start: "top top", end: "bottom bottom", scrub: true, markers: true } }) Now with this what I thought would've happened is that by setting the target as the middle_div the first top at the start would have went at the top of the middle_div like this: But instead what happened was that START went at the top of the body. I don't know how to really fix it, I used percentages instead of top and bottom to fix it a bit, but it would be really helpful if top would go at the top of the target like it always did for me. The only thing I can think of of why this is happening is because the canvas has a parent with absolute positioning, but that's really strange. Anyways thanks in advance for the help.
-
Hey GSAP Team, I have a concern regarding my implementation of "scrollTrigger". The Start/End marker of the triggers isn't aligning correctly with the top and bottom of the triggers. Please focus on the ".services-content-heading-inner" element, as this is what I'm currently experimenting with. My ultimate goal here is to animate this element once it enters the viewport. However, it immediately animates because of how the elements' start/end is positioned. I tried changing the position to start: "center top", end: "center bottom". However, the position is still off and not really at the center of the trigger element. I attempted to change the trigger to the parent element, but the story remains the same. I really want to use scrollTrigger because it seems to be simpler compared to https://gsap.com/docs/v3/Plugins/Observer/. I also tried using https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isInViewport()/ by wrapping the animation in an if-else condition "ScrollTrigger.isInViewport(element)". However, it doesn't fire the logic inside the condition even if the condition was met. I would appreciate your thoughts and expert advice on where I went wrong or missed. Thank you very much for any assistance. -
import React, { useEffect, useRef } from 'react'; import './services.css'; import { gsap } from 'gsap/all'; import { ScrollTrigger } from 'gsap/all'; gsap.registerPlugin(ScrollTrigger); const Services2 = () => { const staticRef = useRef(null); const scrollRef = useRef(null); const componentRef = useRef(null); let componentHeight; useEffect(() => { // Access the height of the component using ref componentHeight = componentRef.current.clientHeight; console.log('Component Height:', componentHeight); // You can perform further actions with the height, such as updating state or triggering animations }, []); useEffect(() => { const staticPart = staticRef.current; const scrollPart = scrollRef.current; gsap.timeline({ scrollTrigger: { trigger: scrollPart, start: 'top 75px', end: `bottom ${componentHeight}`, pin: staticPart, scrub: true, onEnter: () => console.log('Pin starts'), onLeave: () => console.log('Pin ends'), }, }); }, []); return ( <div> <div style={{ display: 'flex', justifyContent: 'space-evenly', margin: '10px', }} > <div ref={componentRef} style={{ width: '40%' }}> <div style={{ width: '100%', height: '400px' }} ref={staticRef}> hi, my name is yosh </div> </div> <div style={{ width: '40%' }} ref={scrollRef}> <div style={{ height: '400px' }}>yes</div> <div style={{ height: '400px' }}>yes</div> <div style={{ height: '400px' }}>yes</div> <div style={{ height: '400px' }}>yes</div> </div> </div> </div> ); }; export default Services2; -
Hi GSAP team, First of all, thanks again for your work, I'm trying to achieve a specific effect for a project I have sections which look like tiles. When we scroll, the next tile is pinned under the current one and then scrolls naturally with the page once the "tile" is fully shown. Like if you have a deck of cards in your hand and you remove them one by one by pushing them to the top. But inside one tile, I have another Scrolltrigger (the black container in the Codepen) and its start value is calculated "well" but as the tile is pinned for one moment, the start value becomes wrong and I would like to recalculate it but it looks like Scrolltrigger cannot do that Do you have an idea of how I can manage this use case? I did a Codepen to show my issue, the markers are supposed to stick to the top and the bottom of the black box Bonus question: I don't understand why the last ".content" background is cut? Cheers ? -
Hi, i have the following issue: I am making a Website using Vuejs and would like to use the ScrollTrigger in a sub-page. On this sub-page images should be revealed on scroll using the ScrollTrigger and toArray. However for some reason the starting point "top bottom" is only set properly for the first image at the first visit of the site. On all following images the start trigger is kind of the same as the first one, which shouldn't be the case. If i reload the page or visit it for the second time, everything works properly and the start and end triggers are at the right place. I don't know whether this i a vue, webpack or gsap bug, or do i miss something? How it should look like and does on reload. On first load mounted() { gsap.utils.toArray(".anim").forEach(anim => { gsap.from(anim, { scrollTrigger: { start: "top bottom", end: "top center", markers: true, scrub: 1, trigger: anim }, y: 120, opacity: 0.3 }) }) }
-
I feel like I may be overthinking this... ? I have multiple sections on a page, each with their own timeline, all of which are attached to the scrollbar via ScrollTrigger. The trigger for each section is the ID of the section's container, and the timelines start at the top of each container. I'm trying to set up a fixed navigation with anchor links for the user to navigate between these sections. The problem I'm running into is that when you click on a nav link, it scrolls the user to top of the container, which is the start of the timeline. Since the timeline is attached to the scroll bar, the user will then have to scroll to play out the rest of the timeline (which I feel is not always intuitive enough). Is there a way to link to the end of the timeline of a section? I tried putting a hidden element at the end of each section for the anchor link to link to... but that doesn't always play out the whole animation. I also thought about making separate timelines (but I feel like that's too much work for something that probably has an easier solution). Am I missing something? -
I've encountered a problem with my start & end position on my ScrollTrigger. This is how the start and end position should be, and every time I save after writing a code the position is correct. However.. When I refresh the page the start & end position gets buggy. The start & end position does not align with the top and the bottom of the container to the left. This is the scrollTrigger code useEffect(() => { const el = cardRef.current ScrollTrigger.create({ trigger : el, start : 'top center ', end: 'bottom center', onEnter : () => { playVideo() store.dispatch(currentElementHover(techNames())) cardRef.current.classList.toggle('cardFocus') }, onEnterBack : () => { playVideo() store.dispatch(currentElementHover(techNames())) cardRef.current.classList.toggle('cardFocus') }, onLeave : () => { resetVideo() store.dispatch(currentElementHover([])) cardRef.current.classList.toggle('cardFocus') }, onLeaveBack : () => { resetVideo() store.dispatch(currentElementHover([])) cardRef.current.classList.toggle('cardFocus') }, markers : true }) },[]) Any help would be appreciated greatly!
-
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.
-
Hi. I'm starting to use this incredible code to have some ads in my page. The issue I'm having is that some banners are located in the middle of the page, so when the user get to that part the animation has already ended. To fix this I'd like to know: - how to start the animation when the <div> section of the banner becomes visible. - If is possible to loop a serie of tweens without timelinelite. Thanks!
-
I put the following CDN code in my HTML file and then executed TimelineLite function in javascript. <html> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TimelineMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/easing/EasePack.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/CSSPlugin.min.js"></script> <My javascript code> start = ()=> { let loader = document.getElementById('loading'), loadContents = document.getElementsByClassName('loading_content'), tlLoader = new TimelineMax(); // Loader Timeline tlLoader .staggerFromTo(loadContents, 0.3, {y:0, autoAlpha: 0}, {y:20, autoAlpha: 1, ease:Back.easeInOut}, 0.05 ) .fromTo(loader,0.3, {autoAlpha: 1, scale: 1.3}, {autoAlpha: 0, scale: 1, ease:Power0.easeNone}, 0.9 ); } start(); Then... the following error appeared in Console. Why is this happening? I guess I add the CDN code incorrectly, so I change to another CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> and tried to use changed TimelineMax to TimelineLite in my javascript code. but this problem is still happening now. plz.. help me
-
Hello there! I am new to GSAP and I want to animate a navbar to shrink whenever the user scrolls down and grow when the viewport is back at the top. So far, I have been trying ScrollTrigger to achieve this, and it works completely fine until I refresh the webpage on the middle. Since it does not scroll back to the top on refresh, the new viewport will be somewhere down on the page and not the top of the window and so my animation will not work perfectly in every situation. I am attaching some screenshots to show you what I mean exactly... And then after refreshing the page this happens: Is there a way to set the animation start to the top of the window (always)? Currently my code looks like this: gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(CSSRulePlugin); gsap.to(".custom-logo-link", { scrollTrigger: { trigger: ".navbar", start: "bottom 150", markers: true, toggleActions: "play none none reverse" }, height: "50px", duration: 0.2 }); gsap.to(".navbar", { scrollTrigger: { trigger: ".navbar", start: "bottom 150", markers: false, toggleActions: "play none none reverse" }, backgroundColor: "white", duration: 0.1, boxShadow:"0px 6px 25px -7px rgba(0,0,0,0.32)" }); Any idea would be appreciated! Solution: The trigger element was a sticky navbar So I set the trigger element to a fixed element like that stripe with the phone number.
-
Hi I'm very new to gsap and I was trying to make a hover animation for my buttons. But I would like the button to return to his start position. I tried to use clearProps, but that doesn't seem to do the trick. Hope someone can help!
-
Hello, I'm new user of GSAP, and I try to make a webapp projet, with animation created with GSAP. I have not really problem for create and animate, it's a hard process to know all posibility of this tool but, is not the problem.. My approach is to try to launch SVG animation without hover (obviously in ipad) and without click: - My webapp content section (fullpage.js) like : #section1 : "home" - #section 2 : "my first animation" etc... I see the examples : http://www.publicis90.com/#/publicis90, or that one http://www.cryptarismission.com/ on this site and it's awesome but i dont understand how can i do that.. I want said : When I change section -> my animation start. If i launch my app now.. All animation start in background and when i change #section, animation is ended.. I sorry for my english and my incomprehension :'( Thanks a lot B.
-
I am trying to create a water fill effect that responds to a input type=range value. Managed to get it fill up but the timeline is not responding after the first animation. You will see what I mean in the JSFiddle. Any help would be appreciated! Still new to GSAP animation so excuse any hacky methods. JSFiddle link here. https://jsfiddle.net/7mLkf5uh/#&togetherjs=bu7OUD9asn
