Search the Community
Showing results for tags 'Animation'.
-
Hello sorry for asking I am new to GSAP and JS. How can I stop fullpage.js from scrolling if my animation is not complete Please help. Thank you. P.S: I am using TimelineMax.
-
Hello everyone, i'm trying to reproduce this : https://heliasoils.com An animated sine background. I tried to play around with a canvas but i'm kinda stuck : https://codepen.io/Ziratsu/pen/BaaWGex Do someone here have done a similar animation ? Do I need to use the canvas or something else ? Finaly how to link the sine wave with greensock, to create a slider or even better animate it with the scroll ? Best, Enzo
-
I am trying to do a simple tweening of increasing the radius of circles whenever the mouse gets clicked over an svg canvas. However, I am getting some jerking/choking on the tweening of the circles, and can't debug it why. This problem only happens when I try to create another circle, before the ones that are currently being animated finishes. Any help is greatly appreciated Main function code is the following: createCircle(evt) { const { clientX: x, clientY: y } = evt const id = `circle-${++this.lastCircleId}` this.circles.push({ x, y, id }) Vue.nextTick(() => { TweenLite.to(`#${id}`, 1, { attr: { r: 50 }, onComplete: () => { this.circles = this.circles.filter(circle => circle.id !== id) }, }) }) }, CodeSandbox example: https://codesandbox.io/s/vue-template-j9my3?fontsize=14 P.S. Sorry I posted a CodeSandbox example instead of CodePen, but couldn't really get the CodePen to work with vue template syntax.
-
Hello GreenSockers, You guys are so awesome and thank you for providing this platform. Today, I saw this beautiful accordion animation https://uimovement.com/design/beaches-app/ and I want to create the same effect using GS. Is it possible to create this effect using in GS? Thanks in advance.
-
Hello There , Swedish London based Rich Media Banner Developer & Designer, with over a decade of experience of building banners for a wide range of clients. Canvas or no canvas? No problem. Greensock or Pixie? Can do. Story-boarding needed? Yes. Video? You bet! Interactive Javascript or image slider? Consider it done! Can work over Zeplin or WeTransfer, whatever you prefer. A codepen sample of my work: https://codepen.io/ThomasJames/pen/RXQrzp Some of the companies I worked with: WWF, Wunderman Ogilvy Gamesys, TBWA\Copenhagen, MRM Meteorite, McCann, The Two Marias, NKD Learning, DOOH, York Press, TAG Worldwide Ad banner platforms I work with: Google Studio, Google Campaign Manager, Flashtalking, Celtra, Sizmek, Adform, Admeto, +Yours (Send me the specs!) Contact me at hello@thomasthorstensson.co.uk for more samples of recent work and a discussion of what you need done!-
- 1
-
-
- javascript
- pixie
- (and 11 more)
-
Hello, I'm building an animation that I want to record as video but for now but I can't record screen with a 100% smooth video for x reasons. So, what do you think about the idea to slow down the animation by using the time scale, take automated screenshots and then merge them into a video format and add audio ? Does it make sense or it's a wrong way ? Thanks
-
Hello everyone, how can I animate with GSAP a gradient text using the css code below? Or some other way. background: linear-gradient(to right,#3b1c52 50%,#b51a84 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-
Hello, I have implemented an animation with text shadows for my text using CSS, and would like to achieve the same effect on my SVG file. Basically what I need are two shadows with different colors moving away from eachother. I tried using SVG animations but then I found out about GSAP, which seems like a very good thing to know how to work with. But since I'm new to all of this I'm giving up after trying about 10 different things. You can pretty much see all the things I've tried commented out. Sorry if it's too much text but I wanted to make sure there'd be enough context. Thanks in advance.
-
I was making an animation using GSAP and SVG. I am new to GSAP so i don't know that if there is another way to do this animation with GSAP. If there is any better way to do this please suggest me. I would be thankful for good suggestions. Edited : it has issue when user scroll very quickly many parts of bulb doesn't appear properly and also some issues when user scroll upside. (Give suggestion to fix it)
-
shape How to clamp shapes like the color block in the middle container?
Zhiyi Zeng posted a topic in GSAP
Hi, I'm new here. I'm trying to figure out how to realize what's in the link rallyinteractive. However, I have some troubles in clamping the color block in the middle. Any help would be appreciated. -
Hi there! I'm very new here. Sorry if I ask dumb questions. I'm trying to create a simple single web page displaying an animation that works exactly like the blue paper (not the white one) animation featured on this website (which is by the way a very beautiful and creative site). But without the text, images only. I'm not trying to rip this website off, the concept is gonna be completely different. I noticed the creator of this website used Tweenlite but for the moment I'm too unexperienced to build it on my own. Anyone here has got a similar Codepen (or whatever) I could use and modify or some useful tricks for a newbie like me? Would be so great! Thank you so much in advance. Cheers from Belgium!
-
Hello, is there a way to integrate such an effect with GSAP? I know I can achieve this effect with css transform translations, but in my case I need to use background-position to animate the movement related to the mouse position. an idea/approach about what I'm thinking: .. // TweenMax.to(".top-image", 1, {backgroundPosition: newvalueX+"px "+newvalueY+"px", ease:Power4.easeInOut}) // .. ps: The pen is just a preview example for what I'm trying to achieve. Hope some GSAP guru' drop some knowledge or show me a solution , I'm a newbie in the field... Thank you, Best regards! Alex -
I have simple css animation looks like this, pen circle to square using css I want the same animation using tween max. can someone help me to achieve this??
-
Hello All, I am looking for the same text hover effect like below link. https://www.artistsweb.com/?fbclid=IwAR1ZFgHylvcRXuiqxcfiLOykfnX7VyQv4CssztG0TbkdW1RlxEWcZ1bMkXE Please help me out.
-
Hi I coded this animated boombox in notepad++ and when the dragger at the bottom is dragged the width of the slider should increase, like in the image below. It works perfectly in my browser but when I put the same code in codepen the width updates as its supposed to but the slider never animates. Is this a codepen issue? or is there something I've left out that is causing this? Thanks
-
Hi all, Not sure if i'm missing something or if I'm doing something incorrect. But I'm trying to run simple unit tests with Jest and Enzyme on my component that uses gsap for a search input box. The component works perfectly fine, animation is great too. But whenever i run my tests, and specifically this line component.find('#close').'click' i get ERROR CANNOT TWEEN A NULL TARGET the close button calls this function below: animation.hideSearch(this.searchInput) animation.hideSearch is: hideSearch(target){ return TweenMax .to(target, duration, { opacity: 0, display: 'none' }) }, And finally here is my search input: <input id='search-input' className={styles.input} value={this.state.searchValue} onChange={this.handleSearch} ref={div => this.searchInput = div}/> Is there anything i need to configure in order to get jest to ignore the gsap animation? Any help is appreciated. thanks!
-
I'm new to GSAP and SVG masks, and I'm attempting to make an SVG logo look like it's filling up with water. I've used this pen by Lucas Bebber as a starting point. I've got the animation working, but I can't seem to get it to start from the bottom of the logo. I've tried working with a simpler circle SVG, but I'm having the same issue. I've played around with the different numbers in the attributes, but I can't seem to pinpoint my issue. Thanks for any help!
-
Hi! Is it possible to make a plinko game with Greensock? Something like this, but with one ball. Thanks.
-
Hi guys, lately I finally started to create some small project with GSAP (slider, simple animations, etc). I thought it was an amazing tool, so I wanted to go deeper and I discovered some sensational works. My goal is to improve my skills for design better user experience, by making animations and immersive interactions. I was very fascinated by works like this: https://www.sartobikes.com/ In many similar websites, I've seen that developers have almost always used GSAP and Pixi. I tried to do some research to understand how the two libraries can work so well, but I did not find anything quite clear and complete that could help me. What I found on pixi seems far from what I would like to do and what I learned from Greensock I think is not enough! I need to understand where I can start with these two tools! A guide, a series of examples or exercises, a book, something that tells me: "this is the right way to do it". In the last days I'm just grasping at straws, and it's really frustrating. I would love to be able to implement my ideas on the code through this special alchemy! What is for you the best starting point? Thanks to all of you!
-
I'm creating a landing page and using GSAP to animate some text according the the user's scroll position. How can I keep the landing page in full view and only start scrolling down the page once the text animation has reached its end?
-
Hi there, I'm very new to GSAP and JS in general, but I really love all the cool stuff that's capable off. Now I've created a tween and some functionality with it. It's all working, but not like I would want it to. For example: how do I define a starting situation from where the animation should take place. I know about the .from method, but when you look at my overlay, it would be in the way the whole time until you click the burger. When I code something hard in my in-line style or CSS like this: .overlay { right: 100%; } It doesn't work either. So I guess my question would be: how do I define a starting situation for a div that should slide on screen when a button is toggled on and slide off when the button is toggled off. My CSS could be off, my JS logic could be off... Tell me please, it would be greatly appreciated! Kind regards
-
Hi y'all. I need some help here with my current project for university. Here's what I want to do: I created a slideshow for which I want to display animations (for example: scale on mouseover), however I want to show different types of animation based off on what slideshow page I am. Let's say I'm on slider 1 / 3 . Here I want the div box to scale:2 I'm on slider 2 / 3 . Here I want the div box to move x:200 I'm on slider 3 / 3 . Here I want the div box to opacity:0.2 The thing is I kind of know how to do it, using an if statement, but I'm not entirely sure what I have to put in between the brackets [if (HERE)] to target each slider. Thank you in advance for all the advice and help : )
-
Hi, I found a part of a transition I wonder how to achieve. Please look at the link below. I'm talking about the transition when the user clicks on the "PLUS"-sign where that scales, moves and transitions to the big black container. I've been trying with scale, transformOrigin, y, x, etc but cant seem to figure out the way to go to? Any ideas? https://dribbble.com/shots/3124285-Personal-Site-JS-Interactions
-
Hi everyone, I'm having some issues with my project for school and I'm hoping someone can help...my animation essentially has four elements: a globe, a dashed line surrounding the globe, a plane that is placed on the dashed line and three clouds. I placed the three clouds in a TweenMax that is separate from the master timeline and they are doing what they need to be doing. The plane is supposed to rotate on the dashed line counter clockwise and that's working fine as well. The globe is supposed to be still and the dashed line is supposed to be rotating clockwise while the plane rotates counter clockwise...this is the part that doesn't seem to be working correctly. Every so often, the animation will completely change in front of me without me even refreshing it– it will either just have the plane, the dashed line and the globe visible (not the clouds) and they'll all be doing what they need to be doing OR it will have everything visible but the dashed line won't rotate. Does anyone know what could be the issue? I appreciate your help!
-
Hi I'm fairly new to greensock, and I'm loving it. I'm making a 3D timeline(or track) that I'm moving eggs forward and backward when scrolling. I've used perspective to get the '3D' effect. But, I've run into problems, getting the egg to 'fall off'/disappear when it reaches the end. I want to make the whole egg disappear/re-appear when it reaches the end, not portions of it as it moves out of the view-box. Is there some cool way greensock can help me do this? Here's the link to the codepen Any comments would be appreciated.
