Jump to content
GreenSock

Search the Community

Showing results for tags 'gsap3'.

  • 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. I am very much confused with the all these libraries.. On the homepage it says all in one .. You just need to import gsap single file. Then on examples i see people have included scrollTo and scrolltrigger separately. Then i see all these libraries are paid. There is no simple table which can tell the difference between free and paid gsap apart from community benefits. Is it like we get some features in pro that are not in free version?? If that is the case all of those codepen are useless for newcomers, because i might be trying hours on some feature which is eventually paid and i am not aware of those. Please can you please resolve the questions ?
  2. Hi All, I am trying to animate something using scroll trigger (minimal reproducible example in codepen link ). I want to scale the circle to 1 when scroll progress is 25%. And for that reason I tried setting the timeline duration to 4 and the animation duration to 1 but it doesn't work. It still takes the full progress of the scroll trigger to make it scale to 1. Your help is highly appreciated. Thanks Edit: Codepen doesn't seem to be working. Here is a code sandbox instead https://codesandbox.io/s/gsap-scrolll-blimx?file=/src/App.js:0-1097
  3. Hello there, First of all, thank you GSAP team for creating such a great library and publishing it for free - fantastic work. Now, the question: I have this idea that I'd like to implement, a page with several full-viewport-height panels. Each of the panels include a couple of animated elements that activate once a certain scroll distance is reached (codepen provided). The animation is built in such a way that its frames could all be (theoretically) placed on a single timeline and animate smoothly from first to last, and backwards as well (each panel fades out at the end of its 'life', so - again, theoretically - no overlapping panels). Slightly similar to fullPage.js functionality. I've built a simple draft of what I want, but have a few issues that I don't know how to solve: 1. Why is it that one of the headers (second frame, purple-ish background) called 'XXX Problem' doesn't fade out nicely like the rest of them, but vanishes right away when moving between panel 2 and panel 3, and when you move back it doesn't appear at all? 2. On panel 3, why do the 3 boxes top and bottom parts start from a certain non-zero height instead of 0, like the 3 boxes on panel 2? 3. If I move slowly between the panels and wait for each animation to finish, it works as intended. However, when I scroll quickly, or refresh the page and start loading it with a scrollbar away from top, some elements can remain on screen, making the rest unreadable. Not expecting a full solution here of course, but can I get some tips on how can I get rid of any artifacts that appear when I scroll the page quickly etc? Is there a way of putting all animations on a single timeline and, say, attach more than one scrollTrigger to it? Thanks. M.
  4. Hey I have created a small example of what I wanna do. As you can see in my codepan video items are popping in correctly but after all three videos popped in I want to animate them on a path so it look like they are scrolling endlessly and I want to make it repeating. Please help me I'm new to gsap.
  5. Hello Folks, Been having a hell of a frustrating time trying to combine GSAP with React. I'm fairly new to both technologies. I'm basically doing a fetch request to get data from a json file (public/data.json) and mapping it into a div in the Test.js component. I just cant seem to animate anything thats returned in the response with GSAP. From everything I was able to find online, it seems I need to use useRef() with GSAP. Any help would be greatly appreciated. I've created a code sandbox here: https://codesandbox.io/s/musicapp-with-react-and-gsap-odjxq?file=/src/Test.js
  6. Hi everyone, first of all I want to say thank you for this great library! It is really easy to start with it an build great effects Now my question. I have setup a simple example here https://codepen.io/Ogod/pen/abprgQp?editors=0010 Basically all images are arranged in a "gallery". The animation should move them from their calculated starting position to their target position. The animation works really fine on scroll but when the window is resized the images are not aligned correctly anymore (x, y and scale are wrong). So I tried to set invalidateOnRefresh to true and use function based values in the calculations. But then the animations breaks: - the opacity is completely missing - the starting positions of the images are initially missing, they just appearing at the right position when the animation starts after resize: - the starting and ending positions are wrong (images are not aligned correctly) - the animation seems to play backwards when I scroll down, so the images are animating from small to big (to their starting position) instead of big to small Any ideas what is wrong with my animation and invalidateOnRefresh? Thanks for your investigation
  7. Hi all, I have created a timeline with some labels, when I created a nav links that when the link clicked, it will scroll to the selected label. I tried using tweenTo, which it's able to go to the selected label, but when i tried to scroll from the current position, it goes back to beginning, and not continue from the current position, is there a way to resolve this? The goal is, when i click on a link, the animate will scroll down/up to the selected label, then when I continue scrolling manually, it will continue from the current position, btw, I'm using GSAP 3, I tried to look search in docs and google for solution, but i cannot find any solution for it, i'm having problem interpreting the duration on the selected label with the scroll position. Regards, Ben
  8. Hi guys, Basically i have two or more containers and i dont want to finish the last container before starting all over again from the first one. So if the one container content is done animating i want to start all over again on that particular container only, rather than waiting for the last container to finish and starting all over again from the first one, which is happening in my codes. see my codepen url. Let me know if this confused you guys:)
  9. hi first of all sorry for my english im trying to replicate navigation menu of http://www.alsafarproject.org/en/map ,its kinda cool it has some skew on scrolling and its smooth and its multi stage, for example when you click on countries in menu submenu will comeup with a nice animation. so i try to make it with gsap becuase why not😃 so here is my long list of question: 1- why my last <li> element is not showing? 2-when i use a low divider in (self.getVelocity/-2000), like -300 when you switch scroll direction fast you will get some choppy skew animation,is there any way to smooth it out like the refreence site? 3- how to achive the submenu transition effect using gsap and vanilla js(by the way i think they use some overflow : hidden trick , but i havent any success for now)? thank you so much for your greate framework.
  10. AlexN

    Prettify the code

    Hi All! First of all I want to say Thanks for the magnificent product for animation. It saves so much time which we can spend on family :) I will be appropriate for your help in beautifying my code, if it is possible. I'm just start using GSAP and don't know if my code is optimized and pretty enough. But it works! const tl = gsap.timeline({ repeat: -1, repeatDelay: 2 }); gsap.to(".path", 50, { strokeDashoffset: -1000, ease: 'none', repeat: -1, }); gsap.set(".plane", { xPercent: -50, yPercent: -50, transformOrigin: '50% 50%', scale: 0.7, autoAlpha: 0, }); tl.to(".plane", { duration: 1, autoAlpha: 1, }) .to(".plane", { duration: 7, ease: 'none', motionPath: { align: ".path", path: ".path", autoRotate: true, curviness: 0.5, }, }, '-=1' ) .to(".plane", { duration: 3, scale: 0 }, '-=2') .to(".pin", { duration: 1, scale: 1.1, skewX: -10, rotate: 20, transformOrigin: '50% 100%', }, '-=2' ) .to(".pin", { duration: 1.5, scale: 1, skewX: 0, rotate: 0, transformOrigin: '50% 100%', ease: 'elastic.out(1.5, 0.2)', }, '-=1' ); How it looks?
  11. Hi, I'm trying to create an animated bar chart that should only animate its barse when scrolled into view. I use jquery to target each chart on the page, then iterate through each set and the bars in each set to set each bar to trigger its animation when the chart as a whole scrolls into view. Each bar is also given an increasing delay so that the cascade on. The problem is, the delay doesn't get applied if scrollTrigger is being used. In the codepen, if you comment out the scrollTrigger lins (26-29), you'll see the delay works. What am I missing here to get this to work? Or is there a more performant/appropriate way to go about this?
  12. Hey folks, I found this Codpen and would love to achieve this in React using Hooks, but having a little problem. Does anyone have this sample in React Hooks?
  13. Hello. Is it possible to do masked gradient reveal text or image like on https://www.apple.com/iphone-12-pro/ 1. I want to reveal first headers on page load like on iphone presentation. It's reaveling left to right. 2. Other sections i want to reveal on scroll trigger with scrub option with gradient also.
  14. Requirements: We have Image sequence of background animation, We want freelancer who can sync text with the background at specific location. Similar to this: But using this approach: https://greensock.com/forums/topic/25188-airpods-image-sequence-animation-using-scrolltrigger/?do=findComment&comment=121602&_backrid=93563
  15. Hey! I've recently started using gsap and was trying to animate the links for a header. I've realised that the animation works fine if the I use 'a' as selector. But if I use '.linkto1' or any other class, the plugin doesn't work. I was actually trying to animate the before pseudo-elements on a but while trying various things, I figured out that classes were not being registered. How do I fix this?
  16. I don't have a codepen but basically what i want to achieve is this: I have some data loading in the background, and i'm using GSAP3 to create a timeline that's animating an svg infinitly, it's a preload animation basically. What i want to do is that when the data is loaded, i want to pause the current timeline object, animate it until the progress is 1, and then when the animation is completely finished i want to create another animation to smoothly animate the preloader out of the screen and then show the loaded data. I saw an example of this in GSAP2 using TweenMax where: you pass the tweenmax object into the to() method, animate the progress property and then assign a callback function to the onComplete() property to kill the timeline object, but that doesn't seem to work in GSAP3, the svg abruptly jumps to the it's final state (where the progress is equel to 1) instead of animating to it. Can you please tell me how can i achieve this? I can't seem to find any example of this in GSAP3. Thanks in advance!
  17. Hello there, I am currently making a basic animation pack that contains effects such as fadeIn, fadeOut, slideIn usinggsap.registereffect(). But as I am making progress I hit a roadblock! I can't seem to get the types right for gsap.registerEffect() to work with Typescript. I'll drop a screenshot below of what is my issue. Any help is greatly appreciated! Edit: gsap.effects.fadeIn() works but it's again flawed, as the intellisense of typescript isn't there as the type is set to any.
  18. Hello, I want to clearProps when iI scrollBack and when my reverse function animation is over to make my links not loosing their hover property. That's because my nav has two different opacity level: The active link is by default on 1, and the other links are by default on 0.3 and when I hover them they go on 0.5 for example. But after making the animation with gsap to hide them, on reverse the get inline styles from gsap that make my default hover not working anymore. Sorry but I'm new with gsap and I couldn't set a valid codepen using gsap3. In my app it works but not on these pen. Thanks a lot for your help
  19. Hello everyone :) I have been way to busy over the last year to really put much effort into my ongoing website project due to my work. I hopped on since I started my holiday vacation, got the latest Club Greensock files (GSAP 3) and I have to thank you for gsap.effects and the smooth nature of how they can be injected into Timeline structures!!! I had started animation grid of material and 3D model fades, scale and transition animations along with some basic photoShop graphic elements that fade, flicker and transition with the models and their materials a little over a year ago. Needless to say, I was structuring test code that was heavy and included a lot of switch cases and duplicated code within each switch case. It was working, but quite heavy and messy. Not to mention the fact that it was hard to iterate on O.o After a day of looking into Gsap.Effects, I managed to redefine all of the animations for the models, model materials, and photoshop graphic elements in two RegisterEffect Functions. I then just nested these into a master timeLine as I saw fit and "BOOM" many, many, many lines of code , switches and switch cases removed! It is easy and quick to iterate on and my code is far easier to navigate! @Carl All I can say and holy crap Thanks!!!! You guys are incredible!
  20. Greetings, I'll go straight to the point. Here's the expected behavior: - I would like the whole section (hero) to smoothly start scrolling out and lose opacity once end of the side panel is reached (last of the 'hello' blocks). Here's what currently happens: - The hero doesn't take enough space (I think?), and the section following it goes above it once a scroll point is reached. The hero doesn't fade out (I realize I haven't done anything for that part, but I'm not sure how to implement it so that it starts fading out once the end of the side panel is reached). Kind regards, Fidda
  21. Hello everyone. I learning amazing library for animation GSAP. I have example by parallax effect on scrolling. https://salute.sber.ru/smartmarket/dev/?_ga=2.31003199.1291033660.1606628165-1328913721.1606628165 In this example, content changes when we are scrolling. I created a starter template, but I can't figure out how to do this effect. https://codepen.io/dc65k/pen/PoGGMRB Help me please.
  22. Hi, I am trying to pin ".sun" element on bottom right of the page as fixed from start of the page till it reach the ".landscape" element, when ".sun" enter the ".landscape" element then it should scroll as normal with page. I am trying to achieve it by gsap 3 with scroll trigger plugin easiest and efficient way. on my codepen it doing totally opposite what i am trying to achieve. can anybody help please.
  23. Hi, I am new to GSAP and trying to reload GSAP/ScrollTigger on DOM #content element change, which can done by many ways, my case: jQuery("#content").load("/somePageURL #content") then the new content replace current page DOM content, and at this stage my code dont work. On my code pen example https://codepen.io/aboutzahurul/pen/bGeQKvy everything works fine on page load (not sure if its the correct way or not) but as if i change #content by calling jQuery("#content").load("/somePageURL #content"); and i replace current content and add custom jquery trigger jQuery(document).trigger('page.loaded',[link]); so i can reload the main timeline function based on the custom trigger page.Loaded but it never load correctly and GSAP animation breaks, only it work if i reload the page on browser. sorry on my Codepen example i didn't added the ajax function to jQuery("#content").load(); cos i am not very expart on codepen but i hope you guys got the idea. On my newly replaced #content may have more .item element or less or empty so i tried to do some checks before i call GSAP timeline. Current HTML: <div id="content"> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=001" /></div> <h2><span>title1</span></h2> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=002" /></div> <h2><span>title2</span></h2> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=003" /></div> <h2><span>title3</span></h2> </div> </div> after jQuery("#content").load("/somePageURL #content"); call newly replaced HTML (#content) may be like this: <div id="content"> <div class="item"> <h2><span>title1</span></h2> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=002" /></div> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=003" /></div> <h2><span>title3</span></h2> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=004" /></div> <h2><span>title4</span></h2> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=005" /></div> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=006" /></div> <h2><span>title6</span></h2> </div> </div> So now, how can i reload the scroll triggered animation correctly without reloading the page? Please help... Thanks.
  24. So I'm implementing a smooth scroll like this: useEffect(() => { const container = document.querySelector(".scroll-container"); document.body.style.height = container.scrollHeight + "px"; const onScroll = () => { gsap.timeline() .to(".scroll-container", { y: -pageYOffset, overwrite: "auto" }, 0) } document.addEventListener("scroll", onScroll) }, []) The smooth scroll is working fine, but its height is not being calculated properly. In other words, the scrollHeight I get from the container, won't be enough to scroll the whole container using smooth scroll. How do I calculate the height I need for smooth scroll?
  25. Hey GSAP Community. UPDATE: I have included the CodeSandbox below in a reply thanks to the great tip from Rodrigo that I can import it So the goal...to have the words PROJECTS and WRITINGS scroll from right side of page to left side of page fairly slowly on the scroll down. I also would like the word/heading to be pinned at the top ideally until the next section (writings) comes into view, then it will scroll up and probably even fade out. And then WRITINGS will scroll across as we're scrolling down and get pinned too for a short time or until the CONTACT div pops up into view or something. Both scrolling words will act the same. The issue. So I got the Projects heading to work as intended more or less, but I tried copying it over to the Writings header, thinking it would be the same, but it just keeps playing up and moving/skipping around and I have noooo idea why. I can't get it to be contained in the 'blue' blogs container. Any and all tips are welcome as well. Respective files and code to look into. ProjectList.js in src -> components -> projects BlogsList in src -> components -> blogs Let me know if people need more info to go on. It Thanks in advance. Simon
×