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. Hello guys, I have 3 questions. 1- How can I tell ScrollTrigger to end the scroll animation when 60% of the div height has been scrolled up? 2- How can I tell ScrollTrigger to end the scroll animation when (70%+5em) of the div height has been scrolled up? 3- Also, another question: I saw this format somewhere: end: ="+500" what does this mean? this is the one I have used but didn't work. ScrollTrigger.create({ trigger: ".s2-wr.projects", scroller: ".sections-wr", start: "40em 0%", end: 'center+=100px center', markers: true, scrub: 0.2, onEnter: () => gsap.to('.s2-wr.projects', { backgroundColor: "#ffffff", duration: 0.2, }), onLeave: () => gsap.to('.s2-wr.projects', { backgroundColor: "#000000", duration: 0.2, }), onLeaveBack: () => gsap.to('.s2-wr.projects', { backgroundColor: "#000000", duration: 0.2, }), onEnterBack: () => gsap.to('.s2-wr.projects', { backgroundColor: "#ffffff", duration: 0.2, }), });
  2. I have an array that changes as the page scrolls in order of svg shapes, I need the first shape to be displayed on page load. Therefore, I entered the first path d manually and statically. When I scroll to the end of the page and then go back to the beginning, it does not display the first page. Therefore, I returned the first shape to the array, but now the first shape is displayed twice in a row, and I want each one to be displayed only once. I read the DOC, but I didn't get anything, maybe I didn't read it correctly for(let i = 0 ; i < heroSlides.length ; i++){ tl.to("#Tear",{ delay: 0.3, duration: 0.5, attr:{d:heroSlides[i].path,}}) .to("#rect",{attr:{style:`fill:${heroSlides[i].fill}`}, delay:0.75, },"-=0.3") .call(changeBoxes, [i],"-=0.4"); } const scroll = ScrollTrigger.create({ trigger: ".module", pin: true, scrub: true, start: 'top top', end: "max", animation: tl, // markers: true, pinReparent: true, fastScrollEnd: false, }); scroll.scroll();
  3. I would like to get help, on how to slow down ScrollTrigger fromTo animations. The goal is to increase the duration of the animations (and the positon of the last fromTo), and this will make the animations slower. Since scrub turned true (to control the animation with the scrolling), the duration property does not have any effect. What am I missing? Thank you in advance for your help! tl = gsap.timeline({ scrollTrigger: { trigger: '.feature-holder', scrub: true, pin: true, pinSpacing: true, markers: false, }, }); tl .fromTo( '.feature-overlay', { autoAlpha: 0, }, { autoAlpha: 0.25, duration: 3, }, ) .fromTo( '.feature-text', { autoAlpha: 0, y: 5, }, { autoAlpha: 1, y: 0, duration: 1, }, '>', ) .fromTo( '.feature-text', { autoAlpha: 1, }, { autoAlpha: 0, duration: 1, }, '>+=10', );
  4. Hi all, I am new to gsap and this library has been fantastic so far. I was looking to recreate the following effect where you click an image, and it flips to the corresponding page. https://dribbble.com/shots/17535054-Homepage-Animation-for-Melbourne-Wooden-Showroom After doing a bit of digging, I thought I could use the following demo below as a base to toggle between component states. https://codepen.io/GreenSock/pen/OJzRdBj To start, I thought it would be best to observe how the component would behave when used multiple times within another component, like a list. Here is where I'm at: https://codesandbox.io/s/gsap-flip-react-test-t3odk8?file=/src/App.js I expected there to be some problem with the states, but I'm not too sure why clicking on any of the three list items only triggers a flip from the last item in the list. It would be super helpful if someone could help me with this, or point me in any direction if this is not the ideal way to approach this. Please let me know if I can provide any additional information. Thank you in advance.
  5. Hi there! I have a question to TimelineMax for loop. I made three images to fade-in. But The last image disappears and the loop begins again. I want to connect the fade-in fade-out naturally. Any help or guidance is welcome. Thanks πŸ™‡πŸ»β€β™‚οΈ This is my demo code. https://jsfiddle.net/rwahefnz/
  6. GreenSock

    GSAP 3.11 Released

    Highlights: gsap.matchMedia() is a game-changer for responsive, accessible-friendly animations. πŸ’š gsap.context() that greatly simplifies setup and reverting of a bunch of animations/ScrollTriggers, especially for React developers! You can now revert() any animation to return the targets to their original state. Set lockAxis: true on an Observer to make it lock into whichever direction the user first drags πŸ₯³ Responsive, accessibility-friendly animations with gsap.matchMedia() One of the hardest challenges for web-animators is crafting animations that work seamlessly on all screen sizes and respect users motion preferences. Well, not anymore! gsap.matchMedia() lets you easily tuck setup code into a function that only executes when a particular media query matches and then when it no longer matches, all the GSAP animations and ScrollTriggers created during that function's execution get reverted automatically! Customizing for mobile/desktop or prefers-reduced-motion is remarkably simple and incredibly flexible. Basic syntax // create let mm = gsap.matchMedia(); // add a media query. When it matches, the associated function will run mm.add("(min-width: 800px)", () => { // this setup code only runs when viewport is at least 800px wide gsap.to(...); gsap.from(...); ScrollTrigger.create({...}); return () => { // optional // custom cleanup code here (runs when it STOPS matching) }; }); // later, if we need to revert all the animations/ScrollTriggers... mm.revert(); Conditions syntax - πŸ’ͺ POWERFUL πŸ’ͺ What if your setup code for various media queries is mostly identical but a few key values are different? If you add() each media query individually, you may end up with a lot of redundant code. Just use the conditions syntax! Instead of a string for the first parameter, use an object with arbitrarily-named conditions and then the function will get called when any of those conditions match and you can check each condition as a boolean (matching or not). The conditions object could look like this: { isDesktop: "(min-width: 800px)", isMobile: "(max-width: 799px)", reduceMotion: "(prefers-reduced-motion: reduce)" } Name your conditions whatever you want. Below we'll set the breakpoint at 800px wide and honor the user's prefers-reduced-motion preference, leveraging the same setup code and using conditional logic where necessary: let mm = gsap.matchMedia(), breakPoint = 800; mm.add({ // set up any number of arbitrarily-named conditions. The function below will be called when ANY of them match. isDesktop: `(min-width: ${breakPoint}px)`, isMobile: `(max-width: ${breakPoint - 1}px)`, reduceMotion: "(prefers-reduced-motion: reduce)" }, (context) => { // context.conditions has a boolean property for each condition defined above indicating if it's matched or not. let { isDesktop, isMobile, reduceMotion } = context.conditions; gsap.to(".box", { rotation: isDesktop ? 360 : 180, // spin further if desktop duration: reduceMotion ? 0 : 2 // skip to the end if prefers-reduced-motion }); return () => { // optionally return a cleanup function that will be called when none of the conditions match anymore (after having matched) } }); Nice and concise! πŸŽ‰ See the Pen gsap.matchMedia() by GreenSock (@GreenSock) on CodePen. You can set a scope so that all selector text inside the function maps only to descendants of a particular element or React Ref or Angular ElementRef. This can greatly simplify your code. See the full documentation for all the details. gsap.context()
  7. I wrote the following code to change the shape of svg, but this code has a problem. I want the color of #rect to change at the same time every time atr changes. Is it possible to do the same code with another solution? var tl = gsap.timeline({}); //2 tl.to("#Tear", { attr: { d: First } }); //3 tl.set("#rect", { attr: { style: "fill:#FB7185" } }).to("#Tear", { attr: { d: Second } }); //4 tl.set("#rect", { attr: { style: "fill: #38BDF8" } }).to("#Tear", { attr: { d: Third } }); //5 tl.set("#rect", { attr: { style: "fill: #A78BFA" } }).to("#Tear", { attr: { d: Fourth } }); const scroll = ScrollTrigger.create({ trigger: ".J02ig", pin: true, scrub: 0.5, start: "top top", end: "max", animation: tl // onToggle: self => console.log("toggled, isActive:", self.isActive), // onUpdate: self => console.log("direction:", self.direction) }); scroll.scroll();
  8. Hello, everyone! My problem is when I scroll camera works good but closer to the end its stopping moving smoothly. At the video I will show how its should work I was inspired by this web-site :)) And as I said, I have some little problems.. This how is working right now: Sorry for music :))))
  9. My camera lags very much.. I dont know why. When its reaches trigger 5 its rotates and then it becomes normal. and when its reaches trigger 7 its lives own life:(
  10. Hello, I am running modal box and menu in codepen. However, the scroll moves during this process, how can it be made active and passive? Can you do it on Codepen example, I tried a few times but I couldn't. Thank you in advance.
  11. Hello, I'm using companets like this in my project, but the page can be scrolled up and down. I definitely want to lock the scroll, I just want it to return to normal when I turn it off. Can you help?
  12. is it possible to make a text take 4 duration to appeared but 1 duration to disappeared?
  13. I need to move camera on scroll. Im trying do somthing similar like this https://virtual.plus-ex.com/showroom when you enter easy mode camera moves and rotate automaticly on scroll. I want to turn camera on Y: -11 when its reach 800 pixels with animation. In my codepen its already works but without animation
  14. 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
  15. 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?
  16. Hi, I'm currently working on an animated landing page based on scroll triggered animations. I have a 'hero section' which has elements animating within it (tree, decorations, etc), these need to animate while the 'hero section' remains pinned while the user scrolls to progress through the animations. My issue is that I cannot scroll when hovering over the hero section when it's pinned and for some reason the container is having "top: 172px" added to it. Somehow the scroll works well when scrolling on that additional grey area (which I don't intend to have as I want the hero section in full height), and the scroll on the hero section doesn't work. I tried adding "z-index: -1" to the hero section and started the pinning trigger at "start: top -20%" then it works as a workaround (source: "https://codepen.io/stevencamilleri-mrg/full/MWvXVNB"), however with that the button inside the content will not remain clickable anymore. Can anyone look into what I might be doing wrong? The idea is to have the user zoom in/out the tree with different content and decorations showing up. PS. I would suggest viewing in full view on Codepen in desktop
  17. I have been taking almost a week to solve this problem by myself, my problem is that if I add snap in scroller trigger variables, there is a pin spacing increasing and moving on the top, but the snap effect is working, since I really want this effect of compulsory snap scroll. If I remove snap variable everything is fine. I dont know how to use CodePen to show my code since I am using reactJs and I am the beginner of gsap and locomotive scroll, I want to make the website have the smooth behavior moving( locomotive scroll ) and gsap horizontal scroll at the same time. I pushed my code onto Github, please whoever and take time to solve my confusion. The related file are App.js, App.scss, HorizontalScroll.jsx, useGsap.js, useLocoScroll.js , the rest of it please ignore: https://github.com/Derek-Y1106/Testing
  18. I want to usenuxt-gsap-module on my nuxt app. I follow the docs in github : https://github.com/ivodolenc/nuxt-gsap-module but I can't acces to this.$gsap in may pages and components, it throws an error : Property '$gsap' does not exist on type 'XXX' my package.json file "devDependancies" : { "nuxt-gsap-module": "1.7.1" } index.vue boxRotation (): void { const gsap = this.$gsap gsap.to('.box', { rotation: 27, x: 100, duration: 1 }) } mounted () :void { this.boxRotation() } nuxt.config.js buildModules: [ '@nuxt/typescript-build', 'nuxt-gsap-module' ],
  19. HI Folks! I've been trying (very unsuccessfully) to build a portfolio site with GSAP and Barba.js I initially built everything with CSS animations as per www.frontenddevelopment.com.au/dev, but failed to get it working yesterday, so I rebuilt it stripped down in a couple of hours today with GSAP. Unfortunately, despite following Barba's documentation, I cant seem to get it working and after 9 hours today I'm pretty frazzled. It may be something silly that I've overlooked due to being so tired. Obviously CodePen is not the right vehicle for a multipage site and I'm not enamoured with it enough to buy a full membership, I spent it on a Club Greensock membership instead. I know that this is a bit off topic, but GSAP and Barba.js is a formidable combination, so I'm hoping that someone can help me get this wireframe working! AS you can see form the site on my dev server, I'm also embedding canvas elements as well. Thanks so much! Andy :) about.html contact.html index.html projects.html main.js transitions.js main.css
  20. Hello friends, when i scroll i want the svg to continue as a downward mask. How can i do that? Can you help me i have a presentation tomorrow. thank you so much... Examples; https://www.lemonade.com/giveback-2019
  21. Welcome back to our getting started guide. If you haven't read part one, you can find it here. Let's continue with timelines... Timelines Timelines let us create adjustable, resilient sequences of animations. Below is a simple timeline containing three tweens. By default, things are added to the end so they play one-after-another. // create a timeline let tl = gsap.timeline() // add the tweens to the timeline - Note we're using tl.to not gsap.to tl.to(".green", { x: 600, duration: 2 }); tl.to(".purple", { x: 600, duration: 1 }); tl.to(".orange", { x: 600, duration: 1 });
  22. hello everyone, thanks for reading. i want to navigate to section by clicking dot Indicator. i have tried to change the Observer code but couldn't Understand the Logic to Sync Both. please Give Me your guidance. thank you very much.
  23. Hi Folks I've (sort of) recovered from a nasty dental issue and I've been experimenting (in between bouts of pain) with some sliding panels. Please refer to the attached Code Pen, now that I've worked out its idiosyncrasies. My questions are as follows: Panel 1 - I've managed to get the text animated inside the panel, I've tried a few different CSS tricks to get the "BIG TEXT" sitting behind the other text as a watermark. Obviously I've tried z-index (and wrapping the three text elements in other divs inside the panel), but it appears to affect the entire text due to what I'm assuming is GSAP determining the z-index of the panels dynamically? Panel 2 - I'm trying to animate the two boxes without much success, I was under the impression that I could determine the trigger points using "left" and "right" properties, but this doesn't appear to work. Snapping - the panels are currently snapping at 50% of either the page width or height. This is probably a fairly complex way to start off with GSAP and ScrollTrigger, especially given that I haven't worked as a Front End Dev in 11 years (I was a Flash AS2 dev, anyway) and I'm still blowing the cobwebs out of my CSS skills - it's changed somewhat over the last decade (obviously for the better). I've generated the panels dynamically successfully, but as you can see the rest of my code is pretty clunky, to say the least. Any pointers as to how to make my code cleaner and to get things animating around the panels would be greatly appreciated. I've spent a full day on this and spent the last few hours of it running around in circles. I'm fairly happy with my progress, but I think I need to use another couple of loops to get it working properly. Thanks so much! Andy πŸ™‚
  24. I apologise about the codepen missing images, But i am trying to make a tree that scrolls horizontally and make about a dozen leaves fall with different paths, all while the background moves to a side at the moment i am struggling to make both work properly, if both do end up working the leaf is slower than the background and stays way too far behind or it simply stops at around the middle of the screen and i am trying to make the leaves fall to the ground is there any advise you could give on the issue? Thank you
  25. Hey all, I am using Adobe animate and am a beginner in GSap. I am trying to do a hover over effect but somehow... cant get it to work. Above the script i have placed this. var textDisplay = root.textDisplay_txt; in the animate canvas i have a dynamic text object with the corresponding instance name "textDisplay_txt" so now i need to get some text in there when i hover over a logo. In this case an AMD socket logo. (could even be an image map or anything else for that matter i guess) The eventlisteners work.. i just dont know what to use here as a property, scaling works. Note the line text? : <p>blabla</p>... thats where i need to do somehting i think., though i am pretty clueless at this point. root.logoAmd_mc.addEventListener('mouseover', logoAmd_over); root.logoAmd_mc.addEventListener('mouseout', logoAmd_out); function logoAmd_over(){ var logoAmd = root.logoAmd_mc; gsap.to(logoAmd,{ scaleY : 1.1, scaleX : 1.1, }); gsap.to(textDisplay,{ text? : <p>blablabla</p> }); } function logoAmd_out(){ var logoAmd = root.logoAmd_mc; gsap.to(logoAmd, { scaleY : 1, scaleX : 1, }); }
Γ—