Search the Community
Showing results for tags 'Animation'.
-
Hi there, I am a newbie web-developer student. Recently I have started exploring the powers of GSAP !! I would really appreciate if somebody could let me know how I can make this as a Mouse Hover effect? I have searched literally everywhere, but didn't get what I was looking for. Thanks in advance!!
-
Hi, I'm trying to achieve the animation for this like in this site . (Can scroll down to this section ) Basically I want to move the text from bottom to top and vice versa. How do I achieve this kind of functionality for each of my .txt-box inside the .panel parent element?
-
I am having a problem with the timings in the Timeline, The cause is either me being stupid or an error in the timings system. the red button is supposed to go back to a green button all at once, but, it goes back segmented, and yes, I setup the timeline properly. here is the code: https://codepen.io/FaxForceFive/pen/zYLQoEN
-
So i am trying to animate the cards at the end of the Page by ScrollTrigger. This page also contains a Initial loading animation of the Page getting revealed. My problem is that if i keep the Initial Page load animation then the ScrollTrigger dosen't work properly (As you can see in the demo) and thecards suddenly appears as soon as the end reaches without a proper animation. But if i remove the initial page load animation then the scrollTrigger animation works fine. Any solution why ? Demo link - Demo here
-
Hello, my question is a bit of a general problem in gsap projects, where I first open the pages, it seems as if the page crashes and freezes, then the animations are active, I am sharing a few examples, where do I make a mistake, can you help? Look at the text animations in these examples, it stops at startup, then the animation starts, that's exactly my problem. https://additive.netlify.app/ App js > https://sukruemanet.netlify.app/assets/js/gsap/app.js https://sukruemanet.netlify.app/ App js > https://additive.netlify.app/assets/js/gsap/app.js https://clever-seahorse-227af4.netlify.app/ App js > https://clever-seahorse-227af4.netlify.app/assets/js/gsap/app.js
-
Hello everyone, is it possible to implement the filling of the button on hover, from the point where the cursor came from? Let's say if from bottom to top, then the animation will go from bottom to top of the button and so on. I would be glad if someone shows the implementation at least from two sides. Thank You! -
Hello... I'm struggling here with such animation that I can't find a solution with CSS, font-stretch is not a solution in this case. At least, is it possible to achieve in web development? It's stretching letters by different positions and angles. Espcieally it's more visible with letter `E` Any help or suggestions please ?
-
Hi I am new to GSAP can you please guide me. I need gsap animation inside a slick slider where on each slider there will be gsap animation of images which will look like a video but I need this with full controls like next previous button. when i click on next button next slide should start from starting and same with previous button. Apart from this, there is a progress bar in bottom which will go with slides. Also, i have added codepen link where you can find slider functionality. I just need to insert gsap in this with smooth effect. Can you please check and guide me with the same. Thanks
-
First of all thanks a lot for creating GSAP, it is amazing! I am new to gsap, I am working on a project where i intend to create 6 slides, which are both vertically and horizontally (fake-horizontally) scrollable. but withing one of those slides (2nd slide) I want to implement the below pen! I tried several approaches, but it does not seem to be working, I've been at it from 4 days straight, please help out! Approaches i tried: 1. simply added the code with some minor changes in "start and end positions" [ it did work, but there were 2 different scrollers, and not connected to each other] 2. tried horizontal: true [since it's "fake horizontal" it didn't work either] 3. containerAnimation -> well this almost worked, but "pin : true" cannot be used with containerAnimation. And i want the scroller to stay in view until the animation on 2nd slide is completely finished. any suggestions would be very helpful, thank you very much!
-
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
-
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', );
-
Hey thanks for your help! I'm a new coder and just discovered Green Sock. I'm trying to plug this into my website on Square Space and need help changing the images. I have several images uploaded to Imgur with url links ready to go but I can't seem to find out where to place those in html (after the <display layer> or <display block> divs), in css, or Javascript by replacing the code at the bottom that links to a set of randomized photo options. At this point I am lost and would appreciate any help you can give me. Thanks! Anna
-
Please check the codepan , i want to scroll the content between the fixed div. but as of now the div is fixed but the inner content is not scrolled.
-
Hello Scrollers ! First time I ask for some help on the forum, but I'm a bit stuck at the moment with my portfolio's slider. The idea is to have the thumbnail on the left, and the infos on the right. Everytime the user scrolls 100vh, the thumbnail and the infos change. this Codepen I found this codepen, which is close to what I am trying to achieve, but I still have three problems : I don't understand how, but the right side of the animation doesn't work properly. The first element should be at top:0 when the animation starts ; When the user scrolls, my element starts by going down, and then up, but it should directly go up ; I cannot figure out how to pin the right element until the user scrolls 100vh everytime + I don't understand why the other elements are still in opacity: 0, and not visible on screen. If anybody could enlighten me, it would be nice ! Thanks, A GSAP newbie
-
Hey! I have a custom timeline UI (similar to the timeline in adobe after effects) where you can set keyframes for different properties like position, opacity, scale etc. I want to save those keyframes in a format like this { time: 1, value: { x: 100, y: 0 }} for the position and add them to the timeline animation. `time` is the position in the timeline where the element should have the x and y in `value`. I just can't figure out how I would set up the code without any additional calculations for the duration. Currently I have a timeline which should be always 3 seconds long and keyframes should be added to that timeline. This code just doesn't feel correct in my opinion because I would need to set the duration manually for each keyframe by checking if there is a keyframe before the current one and then using that time to calculate the duration. const timeline = gsap.timeline({ repeat: -1, duration: 3, paused: true, onUpdate: () => { // update UI } }) const prop = { x: 0, y: 0 } timeline.add( gsap.to(prop, { keyframes: [ { x: 100, y: 100, duration: 1 }, { x: 0, y: 0, duration: 1 } ] }) ) I hope it's understandable because I don't know how I should explain it well. Sorry for that! Can you please give me a hint how I would do this with gsap? I appreciate any help and advice! For reference: I want to "translate" a view like this into "gsap code".
-
Hello everyone, Hope you are fine, sorry for my english. My animation must be played twice time when the page is loaded. I have this animation code but it no longuer work: const logo = document.querySelector('.logo'); const visual = document.querySelector('.visual'); const wording = document.querySelector(".wording"); const sequence = document.querySelectorAll(".sequence"); const tlAnim = gsap.timeline(); tlAnim .add(() => { wording.classList.add('hide'); logo.classList.add('hide'); }) // Visual .from(visual, { x:-500, duration:.3, opacity:0, delay:.5 }) .to(visual, { x:-350, duration:.3, opacity:0, delay:4 }) .add(() => { visual.classList.add('hide'); logo.classList.remove('hide'); logo.classList.add('show'); wording.classList.remove('hide'); wording.classList.add('show'); }) // Shop Informations .from(sequence, { opacity:0, duration:.3, stagger:.2 }) .to(sequence, { opacity:0, duration:.3, stagger:-0.2, delay:4 }) tlAnim.restart(); I hope to find some help Best regards Adel
-
Hello folk i am trying to do like this slider and i make the base html, but i need your help of how i can make this animation , like first revele animation and those scroll, if there is any example that will be great, https://grege-interieurs.com/
-
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?
-
Hello, I'm trying to make an animation that switches the viewport's background color depending on your scrolling position. The animation works great on Chrome and on FireFox, but Safari just looks bad, very laggy and the colors don't transition into the page, but rather just pop up with a delay. Here is my animation code (I am using Vue.js) backgroundAnimation() { let $projects = gsap.utils.toArray(this.htmlID + " .project-wrapper"); let projectListTl = gsap.timeline({ scrollTrigger: { trigger: this.htmlID, start: "top center", end: "bottom center", ease: "none", scrub: true, markers: false, onLeave: ({ progress, direction, isActive }) => document.documentElement.style.setProperty("--background", "white"), }, }); $projects.forEach(($project, i) => { projectListTl.to("html", { duration: 0.1, "--background": $project.dataset.projectColor, }); projectListTl.to("html", { delay: 0.3, duration: 0.2, "--background": "transparent", }); }); }, (The method above runs when there is an update on the component) updated: function () { this.$nextTick(function () { this.backgroundAnimation(); const self = this; ScrollTrigger.matchMedia({ "(min-width: 1024px)": function () { self.scrollAnimation(); }, }); }); }, Any ideas? Not sure where to start looking even. Thanks! -
I have question, I wanted reverse animation "showMenuList"(this is pink background), but this not working, where is mistake? I tried many methods but I failed, pls help
-
Hello, I want to create this distortion effect when scrolling: video of the animation I'm a complete beginner to GSAP like I don't have any basics, but I can learn quickly with the appropriate code, and I'm sure it's possible to do it with GSAP. I already looked at some topics on this website, with the property skew, but it doesn't skew from the center of the image. Furthermore, I want this animation to be vertical, not horizontal like in the video. If anyone can help me with an easy-to-understand solution, that would be awesome.
-
Hey guys, I met GSAP today and I was impressed with the quality of animations that it is possible to do, I found an example of how to make the horizontal scroll using vanilla js, someone who has already done it using react can give me an example of how to make this type of animation. Thank you very much :D
-
Hi! I've made an SVG image with several different objects. The interaction would be this: - If you hover an element there would be a small effect on this element. (a scale, rotate and move depending on the mouse position.) - If you hover out the element get back to the original position. Currently, I have a problem with the targeting, the effect animates all the elements in the SVG. ...And some with the mouse position tracking:) How can I solve this? Thanks for the help in advance
-
Hello good People! I have an issue with (apparently)`transform:rotate()` css in an animation where i use ScrollMagic which uses GSAP 2.x I can't reproduce exactly this on CodePen, yet can't add the 2.x version gsap js. Here is the current dev site: https://legopd22.iwanwilaga.com/ Please check the robot animation on scroll (with orange background) especially on iOS / apple devices. So it breaks on my old iphone6. Other android phone and desktop doing well on any browser i checked. Do you have hints please why this happens? I applied these css but didn't fix it. transform-origin:center!important; transform-box:fill-box!important; Using TweenMax(). and nested timelines function SVG_Vernie_Robot_Anim(){ let ctrl = new ScrollMagic.Controller(); var timeline_robot_inner_elements = new TimelineLite(); var timeline_robot_slide = new TimelineLite(); var timeline_master = new TimelineLite(); var robot = document.querySelector("svg#robot-vernie"); var robot_head = document.querySelector("g#Head_Vernie"); var robot_eyebrow_left = document.querySelector("g#Eyebrow_Left"); var robot_eyebrow_right = document.querySelector("g#Eyebrow_Right"); timeline_robot_slide .add(TweenMax.to(robot, 1, {transform:`translateX(${is_mobile ? 100 : 250}px) translateY(${is_mobile ? 25 : 0}px) rotate(-10deg) scale(1.5)`},0)) .add(TweenMax.to(robot_head, 1, {transform:'rotate(15deg)'},0)) ; timeline_robot_inner_elements .add(TweenMax.to(robot_eyebrow_left, 1, {transform:'rotate(-25deg)'},1)) .add(TweenMax.to(robot_eyebrow_right, 1, {transform:'rotate(25deg)'},1)) ; timeline_master .add(timeline_robot_slide,0) .add(timeline_robot_inner_elements,2) ; new ScrollMagic.Scene({ triggerElement: ".wp-block-getwid-section.szekcio-terkep", duration: 200, //px }) .setTween(timeline_master) .addTo(ctrl); } SVG_Vernie_Robot_Anim(); To me seems the problem is with rotation. Other `translate` properties work ok. Can you reproduce the same issue? Thank you so much! Best, Wiktor
