Search the Community
Showing results for tags 'animate'.
-
Hi, I've been trying to get something to work and after browsing the forums and google, reading a lot of topic and trying a lot of things. I am currently at a roadblock where I have no clue how to continue. Explanation I have a wrapper and 3 sections, what I envision is that my wrapper is pinned and my first section is always visible on load (this works). Upon scrolling down I want to fade out my first section and fade in the second section with a scrub (this also work). Now where I am stuck is, is that I want to have specific elements within the section to fadeIn and stagger and/or add a class when said section is currently active. I already tried using 'toggleClass()' but this seems to work globally and not per section that fades in. Here's a codepen of what I currently have. Any help is appreciated!
-
I wan't to have a google search result page like sticky header animation with gsap, how can i do it.
-
Hello, I am currently trying to apply a simple translate animation between two points however, instead of taking a straight line I want it to take a curved path. For example, given the image below I want to move the item from A to B taking a curved path through the point C (A to C and C to B are mirrored if it simplifies things) I was just wondering if this is possible to achieve this using gsap? Any help is greatly appreciated, thank you!
-
My goal: have an SVG (fill: gradient) animated to change into a different gradient fill. All this should be done dynamically, using GSAP v3 (maybe using gsap.fromTo()?). I can create the SVG dynamically. I can also create other elements like the <defs> and <stop> to go inside the gradient elements. At this point, I can have the SVG display the 1st gradient dynamically. And I can animate other properties (like size, speed, or location). What I cannot do, however, is animate the actual gradient fill change using GSAP. How do you do that? There are a lot of examples from others online, but what I've found only includes: - a solid color changing to another solid color, and back - a gradient changing to a solid color, and back - a gradient changing to another gradient, and back –> but does not use SVGs and uses CSS gradients instead - a gradient changing to another gradient, and back –> but uses GreenSock v2 with the stagger function (which, apparently, doesn't exist with GSAP v3)
-
A Question, is there any way of creating some graphs in GSAP? Like in the graphs in attached picture first line appears then 2nd and so on. I do not have extensive knowledge of GSAP, no idea if its possible in GSAP or not, if its possible in GSAP any help would be appreciated. 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, }); }
-
Helo, i want to disable smooth scroll in mobile browser, because scroll usability is seriously reduced, locomotiv scroll can do this by default. but it doesn't suit me because I use gsap library. I wonder if a scroll without animation is possible for mobile browsers?
-
Hello, I'm trying to have animate a clip path on a div. The div contains an image or a video. The clip path is in a svg, and i use css to apply the clip path, but the animation is laggy. I have tried to insert an image into to the svg the animations i smooth. When i try to use foreignObject to put the video into the svg. The animations is smooth, but there is somekind border on the foreignObject. Currently im stocked how to proceed, what should i search for, how do i debug? In my codepen the first two examples is clippath on a div with some element inside. The next two is the element inside the svg.
-
After a few days of struggling with this I finally decided to post on here for help... I'm trying to create a fullscreen section on my webpage that has a background image that upon being scrolled into view gets an opacity layer over it and after that opacity layer appears the image should become 50% of width (animate from left to right) and from the left side there should slide in a white "box" with text... the opacity, and the white half with text should happen after the image reaches top of webpage and then these animations should happen one after another... My problem is that I don't know how to make these animations apear one after another and the white half with text jumps in relay fast.. it should move depending on user scroll (I tried using the scrub feature of GSAP but I didn't know how to use it corectly to achieve what I want...) P.S this is my first time using GSAP so feel free to correct and point out all the mistakes I made Here is a link to a video of the animation made in XD how it is suposed to look like... https://imgur.com/a/xJHKCdS
-
Hello Guys, I am having trouble creating an circular animation with motion path. Basically what I am trying to achieve is that all the 4 images rotate in even manner. for example First image should start from 0%, second from 25%, third from 50% and fourth from 75%. Here is the code sandbox for my code https://codesandbox.io/s/orbit-motion-path-mb6ns?file=/src/App.js:1339-1344 Please see attached screenshot for what I am trying to achieve Please help me. Thanks
-
Hi All, I need your help to understand how I can build this kind of effect. The idea is quite simple, on scroll the viewport move along a big comp (gallery) but I don't know how to start :-/ Can you help me on this ? Thanks a lot scrollview.mp4
-
Hello, I am quite new to GSAP and I heard a lot of good words regarding its capabilities. I am working on a website where I want to implement momentum-based scrolling as observed in the following websites: https://abhishekjha.me/ https://rekhchandsahu.com/ I spent a day learning basics of GSAP, read some posts on the forum, and did a few Google searches. I stumbled across a similar post, hinting the use of ScrollTrigger plugin. However, I was not able to exactly figure out how to achieve the same effect. Could someone guide me about creating such a scroll experience? (React-oriented solution would be highly appreciated, but VanillaJS-based solutions would also work) Thanks in advance
-
Hello! Is there an easy way to make the width of a span expand to like 500px and then collapse to 0, within a few seconds? Here is what I have so far: gsap.to('.block', {duration: 1, width: 500}, 0.2); I know when using keyframes it would be something like this: @-webkit-keyframes block { 0% { width: 0px } 100% { width: 500px } } Thank you!
-
i'm trying to make one interesting hover effect on mouseleave event.But after 3 days of failers i steel have't any positive results. Did u ever seen somesing like this? https://likely-story.co.uk/ (hover "menu" on top right)
-
Hi i want to make exact animation for testimonial section from this website (https://appinventiv.com/) at the end you will find testimonial section Please provide complete step by step tutorial i was noob to GSAP please help me
-
Hello, I would like to make a page change, a transition from one section to another: Example: xxxx.com/about at xxx.com/contac is there any way to GSAP it? Gracias
-
how to make Scroll with text fill like link below I have done everything I think I can do and have not had a similar result even I hope for any help and at least an idea http://clapat.ro/themes/hervin-wordpress/
-
I am trying to use MotionPath to animate along a path and it is getting the correct data for how it should move but is not actually on the path which is what i need. The code pen shows this issue. The ship "orbiting" should follow and be on the red path.
-
Hi So I'm a bit of a newbie when it comes to using Greensock and I also have an animation that was created by someone else. :-/ The animation uses GSAP to produce a bit of a lengthy animation that needs to be exported as an MP4 file. The animation is divided up into indivdual steps by adding labels for each one e.g.: TimelineMax.add("step1"); ..... TimelineMax.add("endStep1"); I have the original FLA file, so that I can change the current step to be played via a variable called 'step', which I can export as a SWF file and all plays fine - the animation starts and finshes at the desired step, objects turn on and off, tween etc. However when I try to export as an MP4 file the animation doesn't play correctly and appears to start mid-way through an earlier step. :-/ I'm exporting as follows: File > Export > Export Video Checking 'Convert video in Adobe Media Encoder' Setting 'Stop exporting' to 'After time elapsed' and entering plenty of seconds Export as a MOV and open in AME to output as MP4 So far I've tried everything from inserting enough frames in the timeline to actually taking the working SWF and using something like HD Video Convertor Factory but with very poor results. I just don't understand why it plays fine as a SWF file but completely different when exported as MP4? Anyone else had a similar issue? Unfortunately I can't supply a codepen because I have to adhere to data export restrictions. Many thanks Rich
-
Hi... new guy come to the pool. I'm Hadi. Followed tutorial from Petr/ihatetomatoes, and then the issues is come up. First, all the header and navbar is working with tweenlite, but after I put the container which are the main-page and footer. It's not working anymore. What's wrong here? And about the code pen, I don't know why the animation won't moving there. But still the code is working fine on my file that I mentioned previously. I'm sorry, lil shy to come with noob question. But I don't have mentor to ask directly. Thanks for the help. Regards, Hadi EDIT: omg, now in codepen all the animation is working well, but still in my file just header and its nav which working. But for footer and main-page still not. So, what is the problem actually?
-
Hi all, I've been using GSAP for awhile now, but am new to using Adobe Animate with GSAP. This is probably a simple question, but I can't seem to find out why scaling up objects in Adobe Animate using GSAP causes those elements to become extremely pixelated. Is there some kind of setting I am missing in Animate? Thanks!
-
Hello, I have been looking into getting a smooth scrolling effect using GSAP. After looking into Scroll Magic, I realised that what I want to achieve can be done using just using a GSAP timeline. I found something on Codepen which had a similar look to what I was after. I have tweaked this myself but have come to point where I need a bit of help/advice. Basically, my webpage will consist of one page made up of 3 full width sections, each one being 100vh/% in height (so 3 separate panels). The first panel will contain some information and a background image. The second panel will also contain some content but will have a background video applied instead of an image The third will be the same as the first, only with a different background image being used. What I'm trying to achieve to have the panels transition into one another smoothly as you scroll. A simple opacity swap and scale tweak so that as you scroll down the page, panel 1 fades into panel 2 and then panel 2 fades into panel 3. I am having some difficulty with my timeline I think. Currently the top 2 panels fade into each other quite well but I'm having difficulty adding the 3rd panel into the mix. If anyone can offer any advice/help on this then it'd be much appreciated. My codepen URL is https://codepen.io/anon/pen/ZobLYL
-
Hello everyone... This is my biggest problem in Adobe Animate AS3 ever. So the problem is- I have 8 SWFs which have separate topic in each and one main SWF file and i want to connect all of them together like- Firstly i open Main SWF then it shows all the 8 topics name with each button. i used script from code snippets which is 'Click to load/unload SWF' and i assigned all the SWF as it required to open. I have created a button in each SWF to go back to main SWF using same code as i mentioned.... It is working properly but i realized that each time i click to open new SWF, it overlape on old one and when i open multiple times all SWFs, it become very heavy and get legging and hangs very much, consumes more memory... So what can i do to load new SWF and unload all previous SWFs by clicking on same button in each SWF ??????? Please give some idea with whole detailed script which i have to paste with button name and file name(u can assume any button name and file name). As i don't have enough knowledge about writing manual code. Please give some positive response. Thanks....
-
Hi all, I am doing an interactive exhibit for my school's graduation showcase. In one of the exhibit, I implemented Tracking.js, which could detect colours using a webcam. The effect I want to apply is that, once the webcam detect a specific color, it will append the empty h1 and p tags conditionally (example: if detect Red, append h1 to Header A and p tag to Text A, if detect Blue, append h1 to Header B and p tag to Text B). I use jQuery's .text() function to edit the empty h1 and p tags once it detects a colour. However, the effect is quite abrupt. Is there anyway to use GSAP to animate it? P.S: In the CodePen, I did not put in Tracking.js as CodePen could not access the webcam. I used the .click function to show the .text() abrupt effect I was referring to.
-
Hi there! I am making a png spritesheet animation. I have an animation existing of 7 frames which I want to animate back-and-forth. So: from frame 1 to frame 7 back to frame 1 again and back. Example: 1,2,3,4,5,6,7,6,5,4,3,2,1,2,3 etc. I tried reversing with "yoyo:true" but i cant quite get a seamless experience as you can see from the Codepen. The animation goes back to frame 1 before getting into yoyo. I would love some advice from you. Any advice would be appreciated!
