Search the Community
Showing results for tags 'gsap3'.
-
Hi everyone, I'm trying to implement this effect from this website https://isolation.is/. The grid moves by itself and the animation repeat itself as the items always go back to their starting position. Actually it's not only that, once an item goes past a certain point, the element is taken and positioned at the end of the div (so just append in js I guess). First of all I need to make the grid, in the website though there is no row (as in no parent div for the items) so I have a bit of trouble understanding how it's done. I guess I would have to use gsap.set on all my elements but how to calculate the space and offset needed and then the repeat ? I will post a codepen later as I started my project directly in local. Thank you
-
scrolltrigger Need help with resetting my scrolltrigger and timeline on re-size
Racind posted a topic in GSAP
I want to start by apologizing for the JS. I am learning how to use MVC organization and was testing it out with this project. I know it isn't great but I'm learning ?. So... my problem here is that while I have my animations working perfectly on first load... I can't figure out how to reset the timeline and scrolltrigger when the window is resized. I understand that certain aspects will automatically recalculate but I need to recalculate certain element positions on the page. I might be going about this completely wrong as I have many examples of similar types of animations that don't have nearly the JS I have. One tricky caveat to my problem is that this is being built is Hubspot using repeaters for the sections, so I can't hard code the 'tl-line' element. I have to dynamically generate the top position and height of that line based on the center of the first and last bullets. In this example there are only 4 sections, but there could be 2 or 10... who knows. Anyway, I am explaining that to help you understand why it looks like a convoluted way to build the trigger elements positioning. Any help is much appreciated. Thanks! -
React JS - gsap scrollTrigger doesn't working on scroll down but working fine on scrollup
dev-ram posted a topic in GSAP
I am trying to implement timeline animation where each element will be coming up (from right to left) one by one on scroll down and reverse on scroll up At my end its not working on scroll down but working fine with scroll up I have tried the following. import { useEffect, useRef } from 'react'; import { gsap, Power1 } from 'gsap'; import {ScrollTrigger} from 'gsap/ScrollTrigger'; function WeHeard(props) { gsap.registerPlugin(ScrollTrigger); useEffect(() => { const animation = gsap.timeline({ scrollTrigger: { trigger: ".hearedListing", scrub: true, start: "top 10%", end: "bottom top", markers:false } }).from('.hearedListing li', { x:300, autoAlpha:0, duration:4, stagger:2, ease: Power1.out }); }, []); return <> <section className="heared-listing hearedListing" > <div className="container"> <div className="row"> <div className="col-md-12 text-center"> <h2 className="animate-heading">We heard</h2> <ul className="list-unstyled primary-text-color h4 mt-5"> <li >Here is my line one</li> <li >Here is my line two</li> <li >Here is my line three</li> <li >Here is my line four</li> <li >Here is my line five</li> <li >Here is my line six</li> <li >Here is my line seven</li> <li >Here is my line eight</li> <li >Here is my line Ten</li> </ul> </div> </div> </div> </section> </> } export default WeHeard; I am created a codesandbox here -
I have a simple project with Angular 7 using GSAP 3. That's it works perfectly with comand 'ng serve' and 'ng build' of Angular CLI, but when I use the comand 'ng build --prod', the application throws the following error: "Uncaught TypeError: Cannot read property 'easeIn' of undefined". I think the problem just happens in AoT build mode of Angular. Could someone help me with this? Thanks!!
-
hello everyone, i have created this codepen to swap text in the sticky box for each sections. and used scrollTrigger for each. if possible i`d like to know how to use one scrollTrigger and loop though both sections and texts. thank you.
- 2 replies
-
- loop tweens
- gsap3
-
(and 1 more)
Tagged with:
-
Hello everyone, I'm trying to make a timeline here, but I don't know how to use the horizontal scrolltrigger. I also want the images to parallax horizontally, and I want them to go left and right as the scroll moves. Finally, I want to give the opacity active value of 1 for the circles with low opacity in each pass. Thank you very much Example; https://transmissions.cristobalbalenciagamuseoa.com/2019-21/maissane-zinai.html
- 1 reply
-
- horizontal scroll
- horizontal section
- (and 4 more)
-
Hi Everyone!, I am trying to accomplish an effect using GSAP where the scale of the letters (SPECTER) goes from 40 to 0.2. I want the scale to occur from the letter 'C' so we see the whole video at first and then the scale goes down to reveal the words 'Specter'. I am having an issue calculating so the effect starts from the C exactly. As you can see above I have added a calculation for the transform so its (transform: 'calc(50% - 18px), 50%) 50% being the middle and 18px being the distance between both points in C. I would like some guidance on how this can be achieved using GSAP. It is very similar to this other codepen (https://codepen.io/justjoinednow/pen/MWVBQZg) Thank you
-
Hello, tommorow I should show this gallery to some important people. The problem is, why on trigger 4 camera rotates 7 times around its axi? how can I solve it?
-
Hi guys. I am trying to achieve an overlay menu animation using this stack: React, styled-components and gsap. I made a simplified example of my code in here: https://codesandbox.io/s/young-wildflower-ld94q The main overlay animation plays smoothly, but the menu items dont. I am trying to create a stagger effect for each MenuItem component. As you can see using useRef() hook only works only for the last component. When Iterating an array of components useRef() is not the right choice since the same ref has been passed to multiple objects, but still I have no idea how to get a progressive fade for each component and I'm not even sure I'm using gsap in the correct way. What am I doing wrong? Thank you in advance, Matteo.
- 6 replies
-
- react
- styled-components
-
(and 2 more)
Tagged with:
-
hello i am jignasha please someone tell me how gsap3 scrolltrriger work with angular framework , i want one ball is moveing on scroll event in website
-
I'm trying to create `pixel art`. I change `display` from `block` to `none`, because I don't need smooth transition. I used `stagger` to animate that, but when I do that, I observ, the first element's display doesn't change. But When I add, `opacity: 0` (*), it works as I want. * code, I talked about tl.from([svg1, svg2, svg3], { duration: 0.8, stagger: 0.4, display: "none", opacity: 0, repeat: -1, }); No idea, what's the problem, and why this occurs...
-
Hi there, I am trying to make a div(#rec) follow an svg path with I did in my below code but, I want the div to follow down, as I scroll down and follow back up as I scroll up, I will appreciate if you help work on the code below, Thanks https://codepen.io/onseyi/project/editor/DeWepm <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { margin:0; width: 100%; height: 3000px; background:#dfdfdf; overflow-x: hidden; } #rec { position: absolute; width: 150px; height: 100px; background-color: #8894aa; } </style> </head> <body> <div id="rec"></div> <svg fill="none" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 1300 3000"> <path id="path" d="M143.78,431.83c103.76,235.99,223.54,324.48,318.04,360c143.34,53.87,223.51-16.03,379,51.84 c136.54,59.6,292.87,208.71,272.99,325.44c-25.74,151.18-320.87,94.36-612.23,336.96c-155.68,129.63-367.75,392.59-331.29,624.96 c43.59,277.79,443.64,520.03,985.93,492.48" stroke="black" stroke-width="8"/> </svg> <script src="gsap.min.js"></script> <script src="MotionPathPlugin.min.js""></script> <script> gsap.registerPlugin(MotionPathPlugin); gsap.set("#rec", {xPercent:-50, yPercent:-50, transformOrigin:"50% 50%"}); gsap.to("#rec",{duration:5, motionPath:{ path:"#path", autoRotate: true } }); </script> </body> </html> index.html
- 13 replies
-
- gsap3
- motionpath
-
(and 1 more)
Tagged with:
-
Hello, The delay property doesn't seem to work for me while using ScrollTrigger; it does work on loaded animations. Is it supposed to be disabled on scroll? If so, is there another way to delay scroll triggered animations? Really loving GSAP3 so far. Thank you, Julius
- 20 replies
-
- gsap3
- scrolltrigger
-
(and 2 more)
Tagged with:
-
Change Scroll Direction From BottomLeft To UpperRight Angle - ScrollTrigger
s-jay posted a topic in GSAP
Hello Everyone, I'm tying to get the same effect like this: https://brand.denso.com/en/ I am a beginner with GSAP as well as ScrollTrigger. I have tried It like the codepen demo down below , I could change the angle for sliding to upperleft but that is not working properly. Please help me to archive this effect using GSAP and ScrollTrigger. Thanks,- 4 replies
-
- scrolltrigger
- gsap3
-
(and 1 more)
Tagged with:
-
Hello, I'm new to GSAP. I was trying scrolltrigger in a NextJS project but I noticed that gsap.utils.selector(someRef) ... useEffect(() => { gsap.to(someRef('.s1'), { duration: 1, x: 800, scrollTrigger: someRef('.s2'), }); }); ... not working as it should (I guess). Here is the code I was working on. If I use the gsap.utils.selector() then the animation of .s1 is triggering whenever the .s1 is coming inside the viewport but if I use this then the animation of .s1 is triggering when .s2 comes into the viewport as it should. Please help. gsap.utils.selector(someRef) ... useEffect(() => { gsap.to('.s1', { duration: 1, x: 800, scrollTrigger: '.s2', }); }); ... Here is the original code that I was working on import gsap from 'gsap'; import ScrollTrigger from 'gsap/dist/ScrollTrigger'; import React, { useEffect, useRef } from 'react'; gsap.registerPlugin(ScrollTrigger); export default function Home() { const containerRef = useRef(); const container = gsap.utils.selector(containerRef); const test = useRef(); useEffect(() => { gsap.to(container('.s1'), { duration: 1, x: 800, scrollTrigger: container('.s2'), }); }); return ( <> <div ref={containerRef} className='container-wrapper'> <div className='hero section'></div> <div className='about section'> <div className='s1'></div> <div className='s2'></div> </div> <div className='skills section'></div> </div> <style jsx>{` .section { height: 100vh; width: 100%; } .hero { background-color: red; } .about { background-color: green; } .skills { background-color: blue; } .s1 { width: 200px; height: 200px; background-color: white; } .s2 { margin-top: 400px; width: 200px; height: 200px; background-color: black; } `}</style> </> ); }
-
GSAP Text Rotation not working after Deployment in React Application
sergej.reznik posted a topic in GSAP
Hey, I have kinda a big Issue - i've implemented a Text Rotation into a React Application. Locally everything works completely fine. After building it and deploying it on a Server (as a static version) it crashes and is not rotating as it was rotating locally. When it arrives at the last step it scrolls all items down until the first. it's not rotating from the beginning. Check for the Comment " // Start Rotation Animation". GSAP v3.8.0 is installed. Check the WeTransfer link for demo videos of local and staging env. https://we.tl/t-9MCJFOHefo Check the Demo Instance: https://gsap.elbcouture.com/ (maybe you have to reload it a few times, if the issue didn't happend) /* global fullpage_api */ import React, { createRef, useEffect, useRef } from 'react'; import gsap, { Power0 } from 'gsap'; import styled from 'styled-components'; import Header from 'components/Header'; import Stage from 'components/Stage'; import Headline from 'components/Headline'; import ScrollToExplore from 'components/ScrollToExplore'; import xsmallVideo from '../../assets/video/intro/414x896.mp4'; import smallVideo from '../../assets/video/intro/768x1024.mp4'; import mediumVideo from '../../assets/video/intro/1024x768.mp4'; import largeVideo from '../../assets/video/intro/1920x1080.mp4'; const StyledIntro = styled(Stage)` padding: 0; &::before { z-index: 1; pointer-events: none; } `; const StyledHeader = styled(Header)` display: block; @media screen and (min-width: 1024px) { display: none; } `; const StyledContent = styled.div` position: absolute; z-index: 1; margin-top: 71px; padding-left: 15px; @media screen and (min-width: 414px) { margin-top: 115px; } @media screen and (min-width: 768px) { margin-top: 70px; } @media screen and (min-width: 1024px) { right: 0; display: flex; flex-direction: column; justify-content: center; margin-top: 0; width: 50%; height: 100%; } @media screen and (min-width: 1440px) { right: 0; display: block; margin-top: 228px; width: 50%; height: 100%; } @media screen and (min-width: 1920px) { width: 46%; } @media screen and (min-width: 2560px) { margin-top: 15%; } `; const StyledMaskedText = styled(Headline)` font-size: 54px; line-height: 65px; ${({ backgroundImage }) => backgroundImage?.small ? `background: url(${backgroundImage.small}) no-repeat;` : ''} background-size: cover; background-position: center; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; @media screen and (min-width: 414px) { font-size: 64px; line-height: 77px; } @media screen and (min-width: 768px) { font-size: 104px; line-height: 125px; } @media screen and (min-width: 1024px) { font-size: 74px; line-height: 88px; } @media screen and (min-width: 1440px) { font-size: 98px; line-height: 129px; } @media screen and (min-width: 1920px) { font-size: 124px; line-height: 124px; } @media screen and (min-width: 2560px) { font-size: 130px; line-height: 120px; } `; const StyledHeadline = styled(Headline)` height: 52px; font-size: 44px; line-height: 52px; color: #00917e; overflow: hidden; white-space: nowrap; @media screen and (min-width: 414px) { height: 62px; font-size: 51px; line-height: 62px; } @media screen and (min-width: 768px) { height: 100px; font-size: 83px; line-height: 100px; } @media screen and (min-width: 1024px) { height: 71px; font-size: 59px; line-height: 71px; } @media screen and (min-width: 1440px) { height: 103px; font-size: 86px; line-height: 103px; } @media screen and (min-width: 1920px) { height: 132px; font-size: 105px; line-height: 132px; } @media screen and (min-width: 2560px) { height: 160px; font-size: 140px; line-height: 160px; } `; const StyledList = styled.div` list-style-type: none; padding: 0; margin: 0; `; const StyledVideo = styled.video` position: absolute; left: 0; right: 0; bottom: 0; width: 100%; @media screen and (min-width: 1024px) { position: static; display: block; height: 100vh; } `; const StyledHeadlineItem = styled.span` display: block; `; const Intro = ({ backgroundImage, switchingHeadline, active, lastActive, text, scrollTo }) => { const stageRef = useRef(null); const videoRef = useRef(null); const overlineRef = useRef(null); const headlineRef = useRef(null); const sublineRef = useRef(null); const listRef = useRef(null); const listItemRef = useRef([]); const scrollToExploreRef = useRef(); useEffect(() => { switchingHeadline.push(switchingHeadline[0]); if (listItemRef.current.length !== switchingHeadline.length) { // add or remove refs listItemRef.current = Array(switchingHeadline.length) .fill() .map((_, i) => listItemRef.current[i] || createRef()); } }, [switchingHeadline]) const getVideoSrc = (width) => { if (width >= 1920) return largeVideo; if (width >= 1024) return mediumVideo; if (width >= 768) return smallVideo; return xsmallVideo; }; // Start Rotation Animation const vSlide = gsap.timeline({ repeat: -1, paused: true, }); useEffect(() => { console.log('el', listItemRef.current) listItemRef.current.forEach((_slide, index) => { const label = `slide${index}`; const lineHeight = headlineRef.current.clientHeight; if (active) { if (index === 0) { vSlide.to( listRef?.current, { delay: 0, duration: 0.4, y: index * -1 * lineHeight, ease: Power0.ease, }, label ); } if (index > 0) { vSlide.to( listRef?.current, { delay: 3, duration: 0.4, y: index * -1 * lineHeight, ease: Power0.ease, }, label ); } vSlide.play(); } vSlide.add(label); }); }, [vSlide, active]); // End Rotation Animation const [isVideoLoaded, setIsVideoLoaded] = React.useState(false); const src = getVideoSrc(window.innerWidth); const onLoadedData = () => { setIsVideoLoaded(true); }; useEffect(() => { if (active) { videoRef.current.currentTime = 0; gsap.set([overlineRef.current, headlineRef.current, sublineRef.current], { y: 0, opacity: 1, }); gsap.set(scrollToExploreRef.current, { opacity: 1, }); } if (lastActive) { videoRef.current.play(); gsap.to(overlineRef.current, { opacity: 0, delay: 0, duration: 0.25, ease: Power0.in, }); gsap.to(headlineRef.current, { opacity: 0, delay: 0, duration: 0.25, ease: Power0.in, }); gsap.to(sublineRef.current, { opacity: 0, delay: 0, duration: 0.25, ease: Power0.in, }); gsap.to(scrollToExploreRef.current, { opacity: 0, delay: 0, duration: 0.25, ease: Power0.in, }); vSlide.pause(); } }, [active, lastActive, vSlide]); return ( <StyledIntro className="fp-noscroll" ref={stageRef}> <StyledHeader /> <StyledContent> <StyledMaskedText ref={overlineRef} backgroundImage={backgroundImage}> {text?.[0]} </StyledMaskedText> {switchingHeadline && ( <StyledHeadline ref={headlineRef}> <StyledList ref={listRef}> {switchingHeadline?.map((item, index) => ( // eslint-disable-next-line react/no-array-index-key <StyledHeadlineItem key={`${item}-${index}`} ref={listItemRef.current[index]}> {item} </StyledHeadlineItem> ))} </StyledList> </StyledHeadline> )} <StyledMaskedText ref={sublineRef} backgroundImage={backgroundImage}> {text?.[1]} </StyledMaskedText> </StyledContent> <StyledVideo ref={videoRef} playsInline muted src={src} onLoadedData={onLoadedData} style={{ opacity: isVideoLoaded ? 1 : 0 }} /> <ScrollToExplore className="scroll-to-explore" isLight label={scrollTo} dataLabel={scrollTo} ref={scrollToExploreRef} onClick={() => ( fullpage_api.moveSectionDown() )}/> </StyledIntro> ); }; export default Intro; -
Every time i resize the viewport, the backgroundImage of this DIV gets reset to the first image that i set before
soon_to_be_codemaster posted a topic in GSAP
I've reached my witts end here, I have been trying to solve this issue for the past hour or so but with no avail. I created an animation with GSAP that creates an illusion that you are zooming into a planet, then the planet will disappear and a random image of a lake with large rocks will appear and two text boxes appear, one of them with a button. Once you click on the button, the image of the lake and the two text boxes will disappear and another image of the night sky will take its place. Everything works well up to this point, however, when I resize the viewport, the image of the night sky disappears and the image of the large rocks appears again when it shouldn't. I've included the CODEPEN for this but I can't recreate the bug/error. gsap.timeline({ scrollTrigger: { trigger: ".earth_container", start: "-20% 0%", markers: false } }) .to(".earth_planet", { width: "+=2500", height:"+=2500", duration: 3 }) .set(".earth_container", { backgroundImage: "url('https://i.postimg.cc/Dy9ryPpB/earth-forest.jpg')", backgroundSize: "cover" }) .to(".earth_planet", { opacity: 0 }) .from(".text_info_box_earth_one", { opacity: 0 }) .from(".text_info_box_earth_two", { opacity: 0 }); the timeline above executes automatically and the code below is only executed when the user clicks on the button "Night Time". As i stated before, everything works fine to this point, but once i resize the window AFTER i click on the "Night Time" button, however, the backgroundImage of the ".earth_container" reverts back to the image of the lake, when it shouldn't... why do you think this is happening? function change_to_night_earth() { let newHTML = "The night sky is just as beautiful " + "as the the day time sky. Millions of stars in every " + "corner of the sky. There may be less light, but there isn't " + "less beauty at this time of the planet"; let new_HTML = "Click the button below if you want to return to " + "the day time of earth..." + "<br><br>" + "<button type='button' class='btn'> Day Time </button>"; gsap.timeline() .to(".text_info_box_earth_one", { opacity: 0 }) .to(".text_info_box_earth_two", { opacity: 0 }) .to(".earth_container", { opacity: 0 }) .set(".text_info_box_earth_one", { innerHTML: newHTML, attr: {class: "text_containers_white text_info_box_earth_one transitioning_fast"} }) .set(".text_info_box_earth_two", { innerHTML: new_HTML, attr: {class: "text_containers_white text_info_box_earth_two transitioning_fast"} }) //-----this is propbably where the error happens---------------------------------------------- .set(".earth_container", { backgroundImage: "url('https://i.postimg.cc/x8km9XKw/earth-night.jpg')", }) //---------------------------------------------------------------------------------------------- .to(".earth_container", { opacity: 1 }) .to(".text_info_box_earth_one", { opacity: 1 }) .to(".text_info_box_earth_two", { opacity: 1 }) } -
Here's the codesandbox: https://codesandbox.io/s/gsap-transition-snap-react-p421y5 I want the building to smoothly disappear when it hits the trigger point. Instead of animating, building just snaps to opacity: 0.
- 1 reply
-
- scrolltrigger
- react
-
(and 1 more)
Tagged with:
-
Getting some sticky animation when I am using locomotive scroll and scroll trigger
sayan5561 posted a topic in GSAP
This is my first time trying scroll trigger in gsap I am trying to understand how locomotive scroll and scroll trigger work together but when the animation is going on I am facing some kind of sticky-ness in the animation I mean the animation is not smooth there some kind of delay in between but I don't know what is the reason for this. I tried to recreate this situation in my code pen which I have linked below. It will be helpful if some one can help me to solve this. thank you -
How to animate Parallax and Pinning at the same time using GSAP's ScrollTrigger
JAMIUL ISLAM posted a topic in GSAP
I tried to pin the current page (div1) and when the next page(div2) will slide up, the current page (div1) will keep going 30 percent to the top, creating a parallax effect. But the problem is, when The 2nd page(div2) pins and 3rd page(div3) slides up, the 2nd(div2) page's parallax effect breaks the whole design. I need help.- 4 replies
-
- scrolltrigger
- pin
-
(and 2 more)
Tagged with:
-
[GSAP Draggable Utility] onDragEnd Function Animation Not Working!!
Ayaf Noneym posted a topic in GSAP
the onDragEnd function is not working? Also what I want to achieve is that I want to prevent dragging in left as well as in right direction with animation or specifically with slight bounce animation. If I am not using boundsprop everything is working just fine. -
Hi, I've been having an issue with this error ("Uncaught TypeError: t[0] is undefined"), whenever I try to use motionPath and give it a value of an object with multiple values in it, it gives me that error, and I've been trying to solve it for so long with no use. I tried gsap.registerPlugin, I tried importing instead of CDN, I tried different syntax, all with no use. Please help, I've been at this for so long. Should also mention that the error keeps getting spammed, goes up to 90 times sometimes, but it's repeats anyways. Here's the code: Javascript: CSS: HTML: Here's the error itself:
- 2 replies
-
- gsap3
- motionpathplugin
-
(and 3 more)
Tagged with:
-
I have a section middle of page and into this section i have inner scroll When user reached this section firstly pin the section until inner Scroll end then unpin the section on the parent scroll child scroll run until child scroll end.... Please i need help
-
I am confused with gsap.to moving to coordinates. I have a game board with 182 tiles and 182 playing tiles. The goal When the user clicks the bag, a random playing tile is selected and is "supposed" to move over the tile on the board. The CodePen example is just testing for column A and B. Note: SVG image was create in Inkscape.
-
I'm new to Greensock and it's amazing, i decided to use GSAP with scrollTrigger plugin for one of my project, my question is - how do we use multiple timelines with scrollTrigger plugin, i have done it like below and it works, is there any better way to do it? let sections = gsap.utils.toArray(".big-row"); let tl = gsap.timeline({ scrollTrigger: { trigger: ".horizontal-container", pin: true, scrub: 1, snap: 1 / (sections.length - 1), end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth }, }) tl.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none" }); let tl2 = gsap.timeline({ scrollTrigger:{ trigger:'.present-img', start:"top 80%", end:"bottom 10%", markers:true, scrub:true, toggleActions:"restart pause reverse none" } }) tl2.fromTo('.present-img',{x:-400},{x:0})