Search the Community
Showing results for tags 'gsap'.
-
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.
-
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?
-
is it possible to make a text take 4 duration to appeared but 1 duration to disappeared? -
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
-
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, 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
-
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 -
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' ],
-
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
-
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
-
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 }); -
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.
-
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 🙂
-
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 -
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, }); }
-
[Update: We have now found a wonderful freelancer, thank you everyone!] -
Hi Folks What a wonderful thing GSAP is, thank you so much! I was a Flash AS2 developer 11 years ago and used your tween library religiously! I've just finished Carl's wonderful GSAP express course and joined his wonderful Creative Coding Club, I've yet to do his scrollTrigger Express course (i'll start it tomorrow as per my usual Suzuki Method), I threw myself in the deep end and built my first hand coded website in over a decade - my how things have changed! It would appear that the DOM has now caught up with Flash - albeit 10 years later! I have my little recording studio website attempt sitting on my dev server, I can't replicate the issues in CodePen and, to be honest, I don't like it anyway - I'm used to VSCode and Sublime text and a good old fashioned webkit browser. Please refer to www.studioprojects.com.au/dev - hopefully that will give you what you need to help me sort of the mess that I've created! I was feeling rather pleased with myself this morning until I started populating the site with content - such is life The issue that I'm having is as follows - I' currently in Thailand and working on my laptop which only has 1366 x 768 resolution on both the laptop monitor and the AOC USB monitor that I use as a second monitor whilst travelling. What I have built kind of works (at that resolution), but I can't add any more content to each section than is currently there already (it would appear that I can't have content any more than 200px above the bottom of the browser), it's most probably how I'm pinning things, I'm a little rusty with CSS, but it appears t be OK. When I test it on mobile (both off my dev and using dev tools) it breaks - no surprises given the complexity of what I'm trying to build as a first attempt after being relegated to WordPress (yuk) for a decade. It's probably something quite simple and I'm sure that I'll feel rather silly - any constructive criticism and advice are more than welcome - it's been a long time since I've tried to build something outside of the considerable constraints of WordPress. Best Regards Andy
-
I want to create a stagger effect using ScrollSmoother. I wrap individual letters of a word inside a span and then apply lag to each of them. This works well. But when I introduce an h1 tag as a wrapper for these spans, this no longer works. Any suggestions?
-
I'm trying to create a roadmap animation using GSAP ScrollTrigger. I'm stuck at syncing the timeline that reveals the line and the timelines that reveal the dots. I'm not sure how I can achieve the following: 1. Keep the edge of the line always at the center 2. Fade in the dots at the center. I suspect my approach isn't the right one? Any pointers are much appreciated!
-
Hello! I need your help. I had difficulty writing a JS code for changing the background. I have only two colors, it's black and white. The first section should be black, the second section is white, the third section is black, the fourth section is white and so on. At the same time, I want the background to change smoothly when scrolling down. As it happens now for the first two sections. Is it possible to do this? -
Hi, I have an animation that I'm having issues with. I'm trying to reveal a text while also push the logo at the same time (look video reference) but I can't do it smoothly. On my codepen it shows a big jump for the logo image once the text is reveled. Any help on how can I solve this? Screen Recording 2022-06-23 at 15.32.07.mov
-
Hey Everyone, i'am trying to Animate a Group inside of an SVG based on if the Path is scrolled past the Point. Currently the Point is getting visible once the Page loads. But it should only appear or disappear if the line has moved past that Point. I've tried to put it into the Timeline but it didn't seem to work. It should be linked to the ScrollTrigger as the Path animation. Thanks in advance for the help!
-
I'm creating a background effect from blur to clear when scrolling. starts with filter: blur(30px) when image enter viewport. and then more clear with filter: blur(0) after top of image reach top viewport using gsap fromTo and add utils for css filter. but i have no idea for now. can help please?
-
I am using React as part of my stack. I have two elements: 1. A circle, made up of a div using css to style it 2. A square, made up from an svg using a fill colour. I want to be able to use a library, possibly gsap, to programatically trigger the change in position of the both elements from position (x,y) to position (x,y) on the screen using a custom path (svg) or bezier curve. With the above in place, I want to be able to apply a motion blur to the circle and square to enable it to look as if there is a blurred trail behind it. Can anyone recommend me the the right tools to achieve the above?
