Search the Community
Showing results for tags 'javascript'.
-
Hello - I have a code for a custom cursor, and the cursor, which is a ball/circle, was supposed to grow/scale when hovering over a link, if you see the code below, this function is there, but it is not working, does anyone know what's wrong? Thank you in advance. The code is from codepen. I am using the following code, everything is working, except the hover thing I mentioned. div class="cursor"> <div class="cursor__ball cursor__ball--big "> <svg height="30" width="30"> <circle cx="15" cy="15" r="12" stroke-width="0"></circle> </svg> </div> <div class="cursor__ball cursor__ball--small"> <svg height="10" width="10"> <circle cx="5" cy="5" r="4" stroke-width="0"></circle> </svg> </div> </div> <style> body .cursor { pointer-events: none; } body .cursor__ball { position: fixed; top: 0; left: 0; mix-blend-mode: difference; z-index: 1000; } body .cursor__ball circle { fill: #f7f8fa; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> <script> const $bigBall = document.querySelector('.cursor__ball--big'); const $smallBall = document.querySelector('.cursor__ball--small'); const $hoverables = document.querySelectorAll('a'); // Listeners document.body.addEventListener('mousemove', onMouseMove); for (let i = 0; i < $hoverables.length; i++) { if (window.CP.shouldStopExecution(0)) break; $hoverables[i].addEventListener('mouseenter', onMouseHover); $hoverables[i].addEventListener('mouseleave', onMouseHoverOut); } // Move the cursor window.CP.exitedLoop(0); function onMouseMove(e) { TweenMax.to($bigBall, .4, { x: e.clientX - 15, y: e.clientY - 15 }); TweenMax.to($smallBall, .1, { x: e.clientX - 5, y: e.clientY - 7 }); } // Hover an element function onMouseHover() { TweenMax.to($bigBall, .3, { scale: 4 }); } function onMouseHoverOut() { TweenMax.to($bigBall, .3, { scale: 1 }); } </script>
-
Hi we are looking for a full time vanilla javascript software engineer for cast.app, a silicon valley company There is $1000 referral if we hire the candidate. Job description is below but here are the highlights - Experienced vanilla Javascript, - 2+ years paid experience - Startup experience is a plus - equity + market salary, remote, 4K monitor + M1 MacBook Pro - DOM manipulation, javascript worker threads, fast synchronized animation of SVG and DOM experience is great to have https://cast.app/javascript-engineer Send resume to dickey at cast.app -
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
-
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
-
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 })
-
Hi there! I'm newbie with GSAP but really enjoy using it!!! I'm currently trying to build a hover for my site company that play a video on background when hovered. As you can see on the code pen exemple, it works great. My problem is: I would like to pause the video after the the timeline reverse completely. I can find how to delay the pause fonction or using onReverseComplete in the timeline properties but nothing work... Another solution would be to just pause the video and not going back to 0 but the fix img (.img) doesn't come back. But I can't find how to exclude the img animation when the timeline is reversed. Thanks for your help
- 2 replies
-
- 1
-
-
- gsap
- javascript
- (and 3 more)
-
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?
-
https://css-tricks.com/tips-for-writing-animation-code-efficiently/- 1 comment
-
- 3
-
-
-
- workflow
- javascript
- (and 1 more)
-
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
-
Hi there, I am trying to add a next and previous button to the scroll slider (see codepen), so that when you click on next it move to the next slider page, and also maintain the scroll on the slider. I tried to add the below code but did not work <div class="controls"> <button id="prevButton">Prev</button> <button id="nextButton">Next</button> </div> var prevButton = document.querySelector("#prevButton"); var nextButton = document.querySelector("#nextButton"); prevButton.addEventListener("click", function() oldSlide = activeSlide; activeSlide = e.deltaY > 0 ? (activeSlide += 1) : (activeSlide -= 1); activeSlide = activeSlide < 0 ? 0 : activeSlide; activeSlide = activeSlide > slides.length - 1 ? slides.length - 1 : activeSlide; }); nextButton.addEventListener("click", function() { oldSlide = activeSlide; activeSlide = e.deltaY > 0 ? (activeSlide += 1) : (activeSlide -= 1); activeSlide = activeSlide < 0 ? 0 : activeSlide; activeSlide = activeSlide > slides.length - 1 ? slides.length - 1 : activeSlide; });
-
I've installed and imported GSAP and @types/gsap, and my file.ts import it well, but when i run gulp with the Typescript Gulp Configuration i get this error: Error: Cannot find module 'babelify' from 'D:path-to-directory\node_modules\gsap'. I've installed all babel components until i get one last error that tells me "cannot find the function canCompile". -
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)
-
Hey there master-tweeners, So for an online portfolio I'm creating I wanted to add a container with ''things I'm good at''. I wanted to make it out of 9 flipcards with an image or logo on the front, and a small text on the back. Onclick they're supposed to flip around and stay that way untill clicked again. Now so far I've come across two methods to achieve this, but both come with some complications. The first method On first glance it looks like it does exactly what I want. The animation is smooth and steady. The problem though is when you click on the (first) card twice in a row, the second animation starts halfway through the first animation disaligning the starting position. (Bad explanation, try it yourself in the codepen lol) The second method This is much less Tweening which is nice because I have to do it for nine cards, but there's something I want, but cant get with this method. I really like the way the cards bounce with the bounce ease when they flip. Since this method uses a reverse, the bounce reverses too which looks weird, obviously. Just get to the point already I guess my questions are the following, - Is there a way to fix the problem in the first method? - Is there a way to fix the problem in the second method? - Most importantly, what method do you guys recommend? - What's the most efficient way to get this to work on nine cards, without copy-pasting the whole thing nine times? Thanks in advance ? Codepens used in the process (the one on the bottom is mine): https://codepen.io/rhernando/pen/vjGxH https://codepen.io/chrisgannon/pen/JtljL
-
I'm working on a project using ReactJS with Pixi & GSAP and the js library I'm using is called "react-pixi-fiber". I'm trying to reference the React Pixi Sprite object and handling the animation it using GSAP. However, it changes position without easing, and there's no error message showing. Code as below The "moveEle" function will be called from the parent component. class MainObject extends Component { constructor(props) { super(props); this.state = { ... }; this._refEle = React.createRef(); moveEle = options => { TweenLite.to(this._refEle, options.duration, { x: options.x, y: options.y, ease:Power2.easeOut }).play(); }; render() { return ( <Fragment key="MainElesFragment"> <Sprite ref={div => (this._refEle = div)} anchor={centerAnchor} texture={textureUrl} width={width} height={height} x={x} y={y} key="thisEle" /> </Fragment> ) } }
-
I have divided my home page into 4 divs with the class of ".div-pics". And my goal is everytime you hover on one of them a description appears /with the class of ".div-desc". The animation happens through Greensock TimelineLite and the initial position of the description divs is "top: 100%". The code I currently have works, but not with the desired effect. Right now once you hover any of the divs (.div-pics), all description divs (.div-desc) will appear. Instead I would like only the hovered div's description to come on screen, but I don't know how to target it. ! I have divided my home page into 4 divs with the class of ".div-pics". And my goal is everytime you hover on one of them a description appears /with the class of ".div-desc". The animation happens through Greensock TimelineLite and the initial position of the description divs is "top: 100%". The code I currently have works, but not with the desired effect. Right now once you hover any of the divs (.div-pics), all description divs (.div-desc) will appear. Instead I would like only the hovered div's description to come on screen, but I don't know how to target it. <div id="home-about" class="div-pics div-left"> <h1 class="div-title">About</h1> <div class="div-desc dl"> <div class="div-arrow"> <div class="arrow-part arrow-top"></div> <div class="arrow-part arrow-bottom"></div> </div> <p class="div-text dt-left"> Lorem ipsum ... </p> <li class="div-link"><a href="#">Order parts</a></li> </div> </div> function loopDivs() { divArray.forEach(div => { div.addEventListener("mouseover", showDetails); function showDetails() { tlDetails = new TimelineLite(); tlDetails .to(".div-desc", 0.5, { top: "0%" }); } }); } event.target - instead of ".div-desc" won't work since in my case I can't hover the .div-desc, because it is sent all the way down and it's invisible. My idea is to hover its parent and then it would appear. Thanks in advance!
.thumb.jpg.6a17b34aac90b8e236f0bf9dc684c5a7.jpg)
