Jump to content
GreenSock

Search the Community

Showing results for tags 'gsap'.

  • 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. Clicking on a button triggers the number of item elements in a container div. I am animating the item elements using gsap flip. When the number of item elements reduces, the container div resizes to become smaller. However this resize happens too quick. While the item elements are animating they appear to be outside the container div which I don't want. I want the container div to resize slowly such that they always contain the item elements inside. I want to green box to always be around the items. I do not want the items over the text as shown in the attached pic.
  2. Sukru

    Gsap lag problem

    Hello, my question is a bit of a general problem in gsap projects, where I first open the pages, it seems as if the page crashes and freezes, then the animations are active, I am sharing a few examples, where do I make a mistake, can you help? Look at the text animations in these examples, it stops at startup, then the animation starts, that's exactly my problem. https://additive.netlify.app/ App js > https://sukruemanet.netlify.app/assets/js/gsap/app.js https://sukruemanet.netlify.app/ App js > https://additive.netlify.app/assets/js/gsap/app.js https://clever-seahorse-227af4.netlify.app/ App js > https://clever-seahorse-227af4.netlify.app/assets/js/gsap/app.js
  3. Hola comunidad, hice un ejemplo de un elemento pin con gsap y reaccion, creo que lo hice bien, me gustaria saber si hay alguna forma de optimizar el codigo o si esta bien planeado, intente hacer un arreglo con utils para lograr el efecto del texto pero no lo conseguí, solo pude hacerlo usando cada componente individualmente, ¿es posible lograr ese efecto con "gsap.utils.toArray"? Caja de arena: https://codesandbox.io/s/gsap-react-pin-scroll-24c7fc?file=/src/App.js
  4. I have defined some specific end value to the pinAnimation. And the BS4 have accordion with dynamic content. Here the issue is, the scrollHeight is not being refreshed when accordion collapses. I tried using ScrollTrigger.refresh() but it's not solving the issue too. Is there anyway to refresh the scroll height dynamically.
  5. I'm a beginner at GSAP. I have a complex SVG which runs perfectly in HTML. I'm trying to convert it into React by using GSAP. How can I convert the HTML SVG in react? Here's the link to HTML SVG: https://codesandbox.io/s/demo-svg-html-esf3dc?file=/index.html While you put hover over the circle it is animated. Here's the Link to my React App: https://codesandbox.io/s/framer-motion-svg----3333-zcvdk1?file=/src/components/MainSVG.js I try to put all curves parents' id in the motion path. I got an error. Now as you can see I just put only 1 path id in the motion path and all works like a mess. Here's a JS function but I don't know where and how to add that in react. Maybe if I add that to my code it will work. const existElementId = (e) => { return document.getElementById(e) } existElementId("circle" + 1) for (let i = 1; null != existElementId("circle" + i); i++) { console.log(existElementId("circle" + i)) let tl = gsap.timeline({ repeat: -1 }); tl.to("#dot" + i, { duration: document.querySelectorAll("#curve" + i + " path")[0].getTotalLength() / 200, ease: "none", motionPath: { path: "#curve" + i + " path", align: "#curve" + i + " path", alignOrigin: [0.5, 0.5], } }); tl.pause() existElementId("circle" + i).onmouseover = () => { tl.play() } existElementId("circle" + i).onmouseleave = () => { tl.pause().time(0) } } I'm expecting to get any solution/idea to make it like the index.html file.
  6. Is it possible to create that by code using GSAP?
  7. Hello everyone, i try to make this example https://codepen.io/oldskool123/pen/mdrrbyo in react js, but i don't understand why what I did does not work, I am applying what I saw in the documentation but it has not worked, I want to learn how to use this great tool but I have not been able to apply a more complex example in react js. I need some guidance, thanks. :') Here the code sanbox https://codesandbox.io/s/gsap-react-horizontal-scroll-mr4gb1?file=/src/App.js
  8. Hello! I have a usage problem and I'm wondering if what I'm trying to achieve is feasible with gsap. From the CodePen demo, I am looking for the following flow: 1. Scroll the page until section 2, not being 100vh, is at the top of the viewport 2. When section 2 is at the top, scroll the 3 images in the left part. The right part must remain fixed. Section 3 must remain visible and fixed during this scroll. 3. When the scrolling of the images is finished, resume the "normal" scrolling of the page (scroll into section 3) My problems: - In the current demo, I manage to have this sticky effect and get the images scrolling. However, the section below (section 3 in blue) is not visible when scrolling the images. I tried to set pinSpacing: false but I don't get the expected result. - At scroller_start, image 1 is well centered in the left part of section 2. I can't manage to configure the scroller_end so that image 3 is also centered in the left part of section 2, when the "normal" scroll resumes. Any help would be very much appreciated!
  9. Hey guys, i am trying to make an x amount of sections and i want each section to have its animation. The only thing is that i don't know how to adjust the height (or duration) for each section because i want each section's duration to vary. For example, in the codepen i provided i'd like: 1. for the first section to scroll 2000px , during that time the svg elements will move at a different speed upwards creating a parallax effect 2. for the second section the svg camera is coming up on top of the first section and zooming in its squared display (by scaling up the camera), at which point when the display's border touches the screen's viewport width the third section will appear from the center. So its duration should be longer than the first section's duration. Basically i want absolute control over the entrance and exit points of each section as well as their duration. I messed around with the start and end values of each section quite a lot and i can't wrap my head around it. Any help is greatly appreciated!
  10. When the page is reloaded, the animation is not performed. What is the problem? const array = [ { title: "Ref Element 1" }, { title: "Ref Element 2" }, { title: "Ref Element 3" } ]; export function Slider() { const titleH1Refs = useRef([]); titleH1Refs.current = []; //checking for an existing element in an array const addToRefsTitleH1 = el => { if (el && !titleH1Refs.current.includes(el)) { titleH1Refs.current.push(el); } }; //perform animation for all array elements useLayoutEffect(() => { titleH1Refs.current.forEach((element) => { gsap.from(element, { opacity: 0, y: 20, ease: Expo.easeInOut }) }) }, [titleH1Refs.current]); return ( <section className="container"> {array.map((element) => ( <div className="element" ref={addToRefs}>{element.title}</div> ))} </section> ); }
  11. Hello, I am trying to create an animation where the overlapping pinned sections will do a fade in and out transition with full scroll. I've been searching all over the forums and tried myself but unfortunately not being able to create what I want. Here is a minimal demo: https://codesandbox.io/s/elated-nova-bt0fl4?file=/src/App.js By "full scroll", I mean waiting for the transition to complete even if the user forces the scroll to an in-between spot. Similar to how FullPage.js works but with fade transition instead of sliding. In the minimal demo, the transition happens too quickly. However, I also want to achieve a more delayed and smooth transition that is pleasing to the eye, just like every other cool animations created using GSAP! Looking forward to some help from the community. Some of the threads from the forums that I have already tried taking help from which are close to what I am trying to achieve are: I have also attached a screen recording of what I've come up with till now
  12. Hi folks, I'd like to control the scroll behavior by forcing it to scroll to the next section. I've tried to follow this example https://codepen.io/GreenSock/pen/NWxNEwY but my pen isn't working. It is stuck to the first section. Do you have any idea why that's happening? Here is my demo: https://codepen.io/maqquo91/pen/LYBNovZ Thanks in advance
  13. Hello, First of all, I want to say that GSAP has been a fantastic product that has solved many problems for me. I really enjoy using it for my projects! Lately, I started to use scrollTrigger with React and I noticed a strange behaviour. In my minimal codesandbox example, I designed it so that the scrollTrigger is only allow to slide the "door" div to the right during onEnter on the first time only. I am using React state in "iterCount" to prevent the door div from triggering any subsequent time. However, when I console.log the iterCount state, it appears that the scrollTrigger never received the updated iterCount after it was incremented by the onComplete event. Meanwhile, the iteration count is correctly incrementing in the React App itself in the counter at the top of the page. What is missing here? https://codesandbox.a/s/gsap-updating-state-hooks-sliding-door-xucoo0
  14. Hello, I added lightGallery framework to my gsap project, it works fine, but there is a scroll problem. When I turn off the lightbox, it shifts up and down. How can I prevent this? Can you help me? I guess scroll is not locking
  15. Hello, I want to reduce the initial section height while scrolling and I do this, but there is a space between the section below it? Can you help?
  16. Hi guys, I attach a codesandbox with the result I would like to achieve with gsap (but smoother). https://codesandbox.io/p/sandbox/charming-leaf-o1w7xb?file=%2Fpages%2Findex.vue&selection=[{"endColumn"%3A1%2C"endLineNumber"%3A57%2C"startColumn"%3A1%2C"startLineNumber"%3A1}]&workspace=%7B%22activeFileId%22%3A%22cl9zkslmo000hlsgzg75u0gum%22%2C%22openFiles%22%3A%5B%22%2Fpages%2Findex.vue%22%5D%2C%22sidebarPanel%22%3A%22EXPLORER%22%2C%22gitSidebarPanel%22%3A%22COMMIT%22%2C%22spaces%22%3A%7B%22clbdl1aza00103b6g4eqbzi2v%22%3A%7B%22key%22%3A%22clbdl1aza00103b6g4eqbzi2v%22%2C%22name%22%3A%22Default%22%2C%22devtools%22%3A%5B%7B%22type%22%3A%22PREVIEW%22%2C%22taskId%22%3A%22dev%22%2C%22port%22%3A3000%2C%22key%22%3A%22clbdl1aza00113b6gctyx602v%22%2C%22isMinimized%22%3Afalse%7D%5D%7D%7D%2C%22currentSpace%22%3A%22clbdl1aza00103b6g4eqbzi2v%22%2C%22spacesOrder%22%3A%5B%22clbdl1aza00103b6g4eqbzi2v%22%5D%7D is it possible to apply this type of animation to the transition component? What I would like to achieve is an animation that comes from top to bottom and with a fade-in effect (I'm using @nuxt/gsap). Thanks to anyone who can help me!
  17. Hi I am new to GSAP can you please guide me. I need gsap animation inside a slick slider where on each slider there will be gsap animation of images which will look like a video but I need this with full controls like next previous button. when i click on next button next slide should start from starting and same with previous button. Apart from this, there is a progress bar in bottom which will go with slides. Also, i have added codepen link where you can find slider functionality. I just need to insert gsap in this with smooth effect. Can you please check and guide me with the same. Thanks
  18. Hello, I want the footer part to come from the bottom like a parallax. I did it partially, but there is a space at the bottom. Can you help with this?
  19. I wan't to have a google search result page like sticky header animation with gsap, how can i do it.
  20. Hello, the problem I'm facing is that when I scroll pin, the top part gets darker and smaller slowly. I made it smaller, but I couldn't center the beginning in the darkening part, you will see other markers. When I do " start: "center center , end: center center"," the markers do not appear. When the site is first opened, it is not actually white, but actually a very slightly dark color. This should not happen with white > and then > dark tone with scroll... I would appreciate it if you could help. I am sharing the test link I made in this project. https://clever-seahorse-227af4.netlify.app/
  21. Hey everyone, I really new to gsap. Im currently working on a pretty big project in ReactJS with ScrollMagic. Im trying to use gsap for the Text portions of the Animations... and I cant figure out whats wrong. Im trying to do a simple Fade in - Fade out animation on scroll triggers. The current state of the project is hoster on Here and below are the JS and CSS Files related to this.. if someone who knows a bit more than me can help me out.. it would be great JS import { React} from 'react' import { motion, useAnimation } from "framer-motion"; import { useInView } from "react-intersection-observer"; import { useEffect } from "react"; import { Controller, Scene } from "react-scrollmagic"; import Sequence from "./Sequence"; import { gsap, ScrollTrigger } from "gsap/all"; import { useRef } from 'react'; gsap.registerPlugin(ScrollTrigger); export default function Scrollmagic() { const control = useAnimation() const [ref, inView] = useInView() const boxVariant = { visible: { opacity: 1, scale: 1 }, hidden: { opacity: 0, scale: 0 }, } useEffect(() => { if (inView) { control.start("visible"); } }, [control, inView]); const root = useRef(); const q = gsap.utils.selector(root); useEffect(() => { gsap.to(q(".b"), { x: 400, scrollTrigger: { trigger: q(".b"), start: "45% 60%", end: "+=4300", duration: 1.5, delay: 1, opacity: 0, stagger: 0.02, y: 30, ease:"power1.out", markers: true, id: "scrub" /* gsap.to(q(".b"), { x: 400, rotation: 360, scrollTrigger: { trigger: q(".b"), start: "top center", end: "top 100px", scrub: true, markers: true, id: "scrub"*/ } })}); return ( <div className="wrapper"> <div id="root"></div> <Controller> <Scene duration="200%" triggerHook="0" pin> {progress => ( <div ref={root} style={{ width: "100%", height: "100vh", position: "relative" }}> <div class="box b">Test Text </div> <Sequence ref={ref} progress={progress} /> </div> )} </Scene> </Controller> </div> ) } CSS .stickyblock{ position:absolute; bottom:50%; left:12.5%; right:12.5%; margin-top: 50%; color:#fff; font-family: "Montserrat"; font-weight: bold; font-size: 50px; z-index: 30000; } .box { height: 100px; position: absolute; left: 100px; font-size: 50px; color:#fff; font-family: "Montserrat"; font-weight: bold; font-size: 50px; z-index: 30000; } .b { top: 400px; }
  22. Hello, I want the content part to be pin and scroll by hovering over the start part. One problem is that the content doesn't get auto height and scrolls gradually. Example website; https://www.rose-island.co/
  23. Hello, first of all I'm in love with GSAP and everything that it can do! I need a bit of help with the DrawSVG Plugin though. As you can see in the Codepen I provided I have three lines. So the first one (yellow) should draw itself on page load. The other two should draw with scrolling, but the third one should only start after the first one is finished. How do I accomplish this with scrolltrigger and drawSVG. Would be very thankful about every help provided!! Thank you!
  24. Hi, when I add multiple videos, the video scrolltrigger is also giving problems. Can you help me?
  25. Hello, I want to play and pause video with horizontal scrolltrigger. I did the playback but couldn't find a solution to stop it. Can you help me?
×