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. 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
  2. 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
  3. 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' ],
  4. 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
  5. 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
  6. 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 });
  7. 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.
  8. 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 🙂
  9. 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
  10. 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, }); }
  11. 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
  12. 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?
  13. 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!
  14. 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?
  15. 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
  16. 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!
  17. 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?
  18. 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?
  19. Hi, I have recently downloaded a ZIP file containing bonus plugins, and installed it according to your installation guide. I put gsap-bonus.tgz file into the main folder and ran npm install --save-dev ./gsap-bonus.tgz. I import gsap and necessary plugins and register them in my Scroll.ts file, which is responsible for scrolling effects. When I compile the code, I get the error: I logged the gsap object in Observer.js and it turned out to be undefined. What am I doing wrong?
  20. Cyber Division is an international research and development company.We are looking to bring a new identity and experience through implementing GSAP by Greensock to our website to make it more advanced and provide our users/clients with a new immersive flow that will showcase our history and achievements.Our new brand identity and UI/UX Design are done within our creative departments who pieced together all the required assets and elements to define the direction of the website when it comes to animating it.We have also pieced together a moodboard for the animations that we want to implement into the website and we are willing to assist through multiple calls and meetings throughout the journey of the creation of this website.The website is currently being developed using Next Js through two developers in our development department.What we have ready as pages to be animated are :- Landing Page- Contact PageAnd the website consists of more than 4 pages.If you think you are a good fit for this short-term position please apply and keep in mind that we have more projects to come that will require the GSAP expertise.
  21. Hey there, gsap novice here I have a simple fade-in animation on my site. However, the first time the animation loads, the whole site janks and the animation doesn't look good. All subsequent times look extremely smooth. I've tried to recreate it in a codepen, however, there the code seems to work flawlessly. I have no other scrollTrigger or gsap animation on any of the here targeted elements. Did anybody already have that problem and see a solution? Thanks in advance!
  22. Hello everyone, I have a problem which I had for multiple projects already. Whenever I use from in a timeline, combined with Scrolltrigger, it doesn't work. Using a timeline without scrolltrigger it seems to work fine. The codepen I added is an example. GSAP Example From (codepen.io) I recreated the same example with .to instead of .from and you can see it works fine. GSAP Example To (codepen.io) Can anyone help me with this problem? Thanks in advance.
  23. Hello! I want to move the purple block along the path I've draw in the SVG. This is one section of my website which uses gsap all over the page. Rest of the page can be easily selected using the ref but when I use MotionPath, It throws Invalid scope and Target not found error. Here's the codesandbox: https://codesandbox.io/s/gsap-motionpath-react-bkscsf?file=/src/App.js Thank You!
  24. Hello! I am new to using GSAP so I apologise if I follow an incorrect format. I'm currently creating an interaction map that is made out of SVG that uses zoom and pan. I have used multiple solutions (specifically this one) from other topics related to my idea and tried code from CodePen created by other users. At the same time, I am using p5.js which I noticed that this library can be used with. The issue I'm facing is when I try to implement the zoom/pan interaction from one of the examples, it causes an error when I try to interact with the SVG: "Uncaught TypeError: point.matrixTransform is not a function". I was constantly searching for the exact cause until I have removed the "setup()" and "draw()" functions which causes the interaction to work. Nothing else could have interefered as I have created a completely new project that only contained the SVG and the code of the interaction without any of the p5 functions which also worked. I tried to search if other people had a similar issue to mine, but it seems like I'm the first. I am very confused why this happens, does anybody know why? I need both of those functions to do the fundamental things with p5.
×