Search the Community
Showing results for tags 'javascript'.
-
Hello everyone, I hope you are fine, First of all, I am sorry but i am unable to make a CodePen demo. I have this Gsap animation and it works perfectly : document.addEventListener("DOMContentLoaded", function(event){ const logo = document.querySelector('.logo'); const titleOp = document.querySelector('.title-op'); const shop = document.querySelector('.shop'); const cover = document.querySelector('.cover'); const tag = document.querySelector('.tag'); const sideContainer = document.querySelector('.side-container'); const alma = document.querySelector('.alma'); const timeline = gsap.timeline({}); timeline // LOGO ON .to(logo, {delay: .5, x: 0, opacity: 1, duration: .5}) // COVER ON .to(cover, {x: 0, opacity: 1, duration: .5}) // TAG ON .to(tag, {top: 0, opacity: 1, duration: .5}) // TITLE OP ON .to(titleOp, {x: 0, opacity: 1, duration: .5}) // SHOP ON .to(shop, {x: 0, opacity: 1, duration: .5}) // COVER OFF .to(cover, { delay: 1.5, x: 50, opacity: 0, duration: .5,}, "-=.2") // TITLE OP & SHOP OFF .to([titleOp, shop], { x: 50, opacity: 0, duration: .5,}, "<") // SIDE-CONTAINER ON .to(sideContainer, { x:0, opacity: 1, duration: .5, ease: "power4.out" }) // PRODUCT DESCRIPTION & IMAGE OFF .to(sideContainer, { delay: 2, x: 00, opacity: 0, duration: .5}) // TITLE OP, SHOP & COVER DISPLAY NONE .to([titleOp, shop, cover], { className: 'hidden'}, "-=.5") // ALMA DISPLAY FLEX .to(alma, { className: 'alma flex'}, "<") // ALMA ON .to(alma, {x: 0, opacity: 1, duration: .5,}) }); I need to make a condition to bypass this tween when the sidecontainer div is empty .to(sideContainer, { x:0, opacity: 1, duration: .5, ease: "power4.out" }) I thought to use this JS method to achieve that but I need your help for the syntaxe please Thanks a lot
-
Hi there! I have a question to TimelineMax for loop. I made three images to fade-in. But The last image disappears and the loop begins again. I want to connect the fade-in fade-out naturally. Any help or guidance is welcome. Thanks ??♂️ This is my demo code. https://jsfiddle.net/rwahefnz/
-
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
-
So I want to resize my WebGL canvas to be bigger than window.innerHeight but more like document.body.scrollHeight. I also don't want to lose the ration, so I would resize the width by the way (with ratio). I already achieve some sort of resizing, but either the ratio wasn't good or the effect was not on the cursor anymore, like it was some hundreds pixels away from the cursor place.
-
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.
-
Every time i resize the viewport, the backgroundImage of this DIV gets reset to the first image that i set before
soon_to_be_codemaster posted a topic in GSAP
I've reached my witts end here, I have been trying to solve this issue for the past hour or so but with no avail. I created an animation with GSAP that creates an illusion that you are zooming into a planet, then the planet will disappear and a random image of a lake with large rocks will appear and two text boxes appear, one of them with a button. Once you click on the button, the image of the lake and the two text boxes will disappear and another image of the night sky will take its place. Everything works well up to this point, however, when I resize the viewport, the image of the night sky disappears and the image of the large rocks appears again when it shouldn't. I've included the CODEPEN for this but I can't recreate the bug/error. gsap.timeline({ scrollTrigger: { trigger: ".earth_container", start: "-20% 0%", markers: false } }) .to(".earth_planet", { width: "+=2500", height:"+=2500", duration: 3 }) .set(".earth_container", { backgroundImage: "url('https://i.postimg.cc/Dy9ryPpB/earth-forest.jpg')", backgroundSize: "cover" }) .to(".earth_planet", { opacity: 0 }) .from(".text_info_box_earth_one", { opacity: 0 }) .from(".text_info_box_earth_two", { opacity: 0 }); the timeline above executes automatically and the code below is only executed when the user clicks on the button "Night Time". As i stated before, everything works fine to this point, but once i resize the window AFTER i click on the "Night Time" button, however, the backgroundImage of the ".earth_container" reverts back to the image of the lake, when it shouldn't... why do you think this is happening? function change_to_night_earth() { let newHTML = "The night sky is just as beautiful " + "as the the day time sky. Millions of stars in every " + "corner of the sky. There may be less light, but there isn't " + "less beauty at this time of the planet"; let new_HTML = "Click the button below if you want to return to " + "the day time of earth..." + "<br><br>" + "<button type='button' class='btn'> Day Time </button>"; gsap.timeline() .to(".text_info_box_earth_one", { opacity: 0 }) .to(".text_info_box_earth_two", { opacity: 0 }) .to(".earth_container", { opacity: 0 }) .set(".text_info_box_earth_one", { innerHTML: newHTML, attr: {class: "text_containers_white text_info_box_earth_one transitioning_fast"} }) .set(".text_info_box_earth_two", { innerHTML: new_HTML, attr: {class: "text_containers_white text_info_box_earth_two transitioning_fast"} }) //-----this is propbably where the error happens---------------------------------------------- .set(".earth_container", { backgroundImage: "url('https://i.postimg.cc/x8km9XKw/earth-night.jpg')", }) //---------------------------------------------------------------------------------------------- .to(".earth_container", { opacity: 1 }) .to(".text_info_box_earth_one", { opacity: 1 }) .to(".text_info_box_earth_two", { opacity: 1 }) } -
Hello! I'm wondering how to replicate this effect on https://monopo.london/ where the mouseover interacts with the colours. I thought it would be something like this https://tympanus.net/Development/FlowmapDeformation/index.html, but it does not seem like it as in this case, it's a still image. In Monopo London, the mouse was interacting with the colours. Really am dying to find out: 1) What this effect is called. Is it repulsion effect? 2) How do I make this? (e.g., use Pixi.JS or WebGL... or?) 3) Are there any tutorials to watch/learn about this mouseover effect together with the glowy background? Any help would be greatly appreciated!
-
Hello! I am trying to accomplish this effect https://greensock.com/docs/v2/Plugins/DirectionalRotationPlugin on a 3d scene. So basically i want the camera to transition to the point selected and not jump to it as it is right now. How can i do that?
-
Hello everyone, I would like to develop this kind of animation for my background. Anybody suggest me about this how can I develop this? Also how can I add liquid hover effect on images. https://s.muz.li/NzNjY2YzNGRi Thanks
-
Is there a way to tween the values of an array when in a for loop? I saw that there was an endArray plugin for the AS version of greensock which is close to what i'm looking for, but it doesn't appear to exits in js. Trying to do something like this: var array=[0,1,2,3,4,5]; for(var i=0; i<array.length; i++) { TweenLite.to(array, 0.5, {i:0}); }
-
Does anyone knows how to make a website like this?? - https://www.erikasenftmiller.com/ What plugins should I use? and if you have codepen link please share it with me Thanks
-
Hi all- I'm brand new to the GSAP space. I have an existing React project and want to implement a GSAP animation. The person that made it for me sent it in an HTML file. How would I go about implementing this into my React site? I know there's a react-gsap NPM package but figured there might be an easy way to just plug the HTML doc in and get it working that way? I've attached the file to this post; if you click when it loads, it should play the animation. Thanks! index-v3-3 (1).html
-
I have a problem, I have written many lines of code that are similar and with the same structure, will there be a way to automate the code? I need help
-
Hi, Id like to know if there is a GSAP function that can create the effect of a mouse following the cursor
-
Good day everyone. I have just completed my personal portfolio site which makes use of GSAP. However, it seems the animations are not playing and so the page remains blank. Everything works fine on my local server but when I uploaded my website to the dreamhost servers, the animations no longer work. There are no errors whatsoever on the console. I contacted the customer service and was told that in my error.log file it says the folder where all my GSAP.js files are located cannot be found. But looking at my panel, all files were uploaded successfully. Ok, in order to be sure it was not just the dreamhost servers, I decided to try uploading the site to github servers and still the same thing. The site and all files uploaded successfuly but the javascript files are not running or located. I don't know exactly. And after looking at the console and the network in the google developer tools, there is no single error, it shows all files were uploaded successfully as there is no error. What may be causing this issue? I'm lost.
-
I am using BarbaJS for creating my Portfolio by using a <ul> for creating a Page-Transition. I have set up GSAP Animations and Many More such as AutotypeJS but they aren't getting fired neither are the CSS is getting applied after the Page transition is done. Once I refresh the page, The Animations gets fired. What could be the possible reason? gsap.from('.btn-blue', { opacity: 0, duration: 0.5, delay: 21, y: 50 }); gsap.from('.anim1', { opacity: 0, y: -100, duration: 0.5, stagger: 0.5 })
-
I have created a product list page where every thumb image will have a zoom effect. the zoom effect code is working fine in the pure javascript. but my project is in vuejs and I wanna achieve same effect in my vue component. I already made my component and put some code in vuejs way. but it's not working right way. when I clicked it jumps to top left and then zooming. Here is my sandbox link in vuejs. Maybe I am missing something or there is have a better way to write this pure javascript code to vuejs way. it would be appreciated if any expert takes a look and give me the solution. The zoom effect goal is this. I believe i am very close to this effect. just can't figure out the problem. Thanks in advance.
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .loading{ background: orangered; position: absolute; top: 0; bottom: 0; right: 0; height: 100%; width: 100%; z-index: -99; } button{ padding: 10px 30px; background:#323232; color: white; outline: none; border: none; position: absolute; z-index: 9; top: 45%; left: 45%; cursor: pointer; } </style> <body> <div class="loading"> </div> <div class="btn"> <button>CLick</button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js "></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js "></script> <script> const ld_gray = gsap.timeline({paused: true}); ld_gray.from('.loading', {duration: 1, delay: 0.5, scaleX: 0, transformOrigin: 'left', ease: "expo.out",}); ld_gray.to('.loading', {duration: 1, delay: 1, scaleX: 0, transformOrigin: 'right', ease: "expo.in",} ); $('button').click(function () { ld_gray.restart(); }); </script> </body> </html>
-
I want to animate the background, If click the button background will be animate, It works fine except that after one click, It doesn't work again. <body> <div class="loading"></div> <div class="btn"> <button>CLick</button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js "></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js "></script> <script> $('button').click(function () { ld_gray = gsap.from('.loading', 1,{delay: 0.5, scaleX: 0, transformOrigin: 'left', ease: "expo.out",}); gsap.to('.loading', 1,{ delay: 1.5, scaleX: 0, transformOrigin: 'right', ease: "expo.in",} ); }); </script> </body>
-
Hi! I've come across this especially unique combination of effects, and have been left in both awe and pain trying to figure out how to replicate such a complex stringes of elements. I've already done some research to figure out the basics of its mechanics, but as someone new to coding, my understanding is limited still. The site and effects in question are: Home Page - https://panamaera.fr/ 404 Page - https://panamaera.fr/404 About Page - https://panamaera.fr/about There seem to be two effects at play. A Canvas over images/videos, that generates a smokey distortion effect, rendering the smoke depending on what visual is underneath the canvas. The Canvas remains active between pages, registering a page change just like a visual change in a video, creating the fading smoke distortion transition between pages and their visual material. A mouse hover effect with smoke & distortion. The smoke is moving in synch with the Canvas' smoke, while the pointer clears the Canvas from over the image and lightens it a bit. On here https://www.awwwards.com/sites/panamaera, the site is tagged as having WebGL, GSAP Animation, ReactJS, GLSL used on it, however I'm not looking to learn everything about these tools, only whats specifically needed to recreate these effects. As I am looking to learn to recreate this effect, my questions are: What coding methods and techniques are they based on (within the world of the above mentioned tools)? What are the exact & relevant coding topics I should look for education on? How would you go about recreating these effects?
-
Hi, I creating a website and i using TweenMax. I've created line animation like this; Its connected with scroll. Animation is like that; First left long line going down then bottom line goes to right then right line starts from bottom to top finally top line start from right and goes to left and animation is ends. At the end we had this image. But there is something it will drive me crazy. At the start of animation lines goes normal (fast). But when its ending its very slow down like smoothing. Example at the start of animation i scrolling 1 click, lines with changes between 0 - 30px but the end of animation i scroll 1 click again and lins with changing between 0 - 10px. Why it like that? I want line is always change same pixel when i scroll same long. In other words i want to close this smoothing.
-
Hi everyone, I have a simple problem to solve ( I'm sure that's something dum ): I have some points as bezier curve, and I'm animating a Svg along that path. This is the code: let flyMove = new TimelineMax({ ease: Linear.easeNone, repeat: -1, paused: true }); flyMove.to("#" + id, 12, { ease: Linear.easeNone, bezier: { values: [ { x: startPointX, y: startPointY }, { x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) }, { x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) }, { x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) }, { x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) }, { x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) }, { x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) }, { x: startPointX, y: startPointY } ] } }); I'm trying to figure it out why the svg doesn't start again at the same point: can you help me? Thanks in advance, Simone
-
Image is getting called multiple times in network section of dev tools. when i am using BezierPlugin GSAP 2.1.2 and assigning image as css background issue.zip
-
Hi there! Im looking for a professional to start a partnership. I have a demand of a new customer that needs a Full Stack Developer that are very skilled in Greensock and/or Adobe Animate. This project will be for a world known company that leads his market, so its a great opportunity. At this moment we need two person to deal the amount of work we will have if we got this contract. The customer said about 150 projects a month. I'd like to be very clear about all details. This is a project in building step, and I need your help to make it happens. The company still don't provided too much information about what need to be created. Basicaly will be lots of animated banners and some web interations. You can see a sample of their work here: https://app.frame.io/presentations/07cb2e9d-4f18-458e-855a-1fc05a657b30 So, what I need ASAP is two people that can embrace this partnership to we can got this great contract and make some money togheter. Please, take a look in the demo reel above and send me some prices bases in hour fee and fixed project so I can send a budget to the client. I'm going to the last meeting to make the deal and to make the things happen I need to have this team fullfiled. Thanks for your attention in advance Sam
