Search the Community
Showing results for tags 'gsap'.
-
Hi Guys, I hope you can help me to fix the over scrolling on this slider. I forked this slider animation from @Ihatetomatoes tutorial. And added a mouse-wheel function that makes it scroll up and down using the existing function that Peter use but what I want to achieve is not to over scroll(not the infinite scroll) it to other section. And even if I hot scroll the wheel it will just snap onto the next slide. Best Regards, Mikhail Villamor
-
I put my code in codepen but it don't seem to work and I don't know why. Anyway my problem is when I scroll down to see the next slide the image don't fade to the next one but when I scroll up to see the previous slide it does. Any idea ?? I'm new to the greensock universe so don't be to rough with me. Thanks guys !!! -
is there anyway to set timeline duration regardless of each tween duration in timelinemax? i used this trick tl.set({}, {}, 15); but it only works when time line length is less than the new value -
Good day lads. I have a pressing question and I am hoping this is the right place to ask. Can anyone direct me on the general approach towards achieving scrolling like these on the following sites - http://fantasy.co/ and https://www.ramotion.com/. Generally what I want to know is how to listen for the onScroll event and scroll to an anchor or an element on the page such as can be seen from those sites. I've tried searching online but all the tutorials seem to be doing this on click of an anchor link whereas I want to achieve this on scroll. Anyone able to help?
-
Hi, I am new to GSAP. Hence I need to know how to integrate GSAP to PIXI.Container. Basically, I need to move the container out of focus by -GAME_WIDTH Like, TweenMax.to(container.position, 1, {x:-GAME_WIDTH}); Thank you.
-
Hello! I'm pretty new and still learning GSAP, which is pretty awesome and powerful. I've been working on a horizontal website so as you scroll, animations are being triggered based on the scrolling position. I've combined GSAP with Scroll Magic to achieve this. You can see the site here - http://maric.launchcatapult.com/ I have 5 main sections Home, WePartner, WeAdvise, WeServe, and WeEmpower. I've created a cross over transition, which you can see towards the end and after all of the animation is completed of the "We Partner" section. During this cross over transition animation, how can I make the timeline jump to the very start of the next section, which would be the "We Advise" section then continue on its animation from there? Another example that I've been looking at is from http://tram-house.com/. After you insert the key into the hole, they have that circular transition, then after that animation is complete it takes you to the beginning of the next section (also provided screen shots). Can any one direct me onto the right path to achieving this same thing? I know the tram-house.com site is using a canvas instead, but I know little to none about how to animate and draw shapes within canvas. That's why I'm just tweening svg shapes instead. Thanks!
-
It is not possible to select and copy full link.
-
Hello GSAP community, I am trying to play 2 timelines one after the other. when timeline 1 finishes, immediately play timeline 2. After lots of trying and reading the forum, I still haven't found a solution yet. My problem is when I get some panels open and I click on the menu button, I want the open panels to slide back then immediately animating all the panel to go offscreen So far I need to click twice on the menu button for this to happen I am using a master timeline, as i understand is the way to do such things. what do I do wrong in the master timeline? why are the timelines not chaining? Sorry the code is a bit messy but I’ll work on refactoring soon, however, any tips will be welcome Thanks a lot
-
Hi, I've hit an interesting problem using delayedCall/killDelayedCall I've got a number of classes which, typically should run consecutively, but, can run concurrently. The classes are loading a video, and then when this fires its complete event, a delayedCall is used to activate the next part (usually loading an associated MP3). But, as the class/video can be skipped and should that happen I won't wont the next part to be activated, I use killDelayedCall to stop it. What I've found is that not only will the delayed call be stopped from the first class, but from any other that are running that delayedCall. I've not gone through the GSAP source, but, I expect that killDelayedCall is removing all references because it's using the name of the function rather than some unique reference. So, is there a way to avoid this? (I have a fix, it's just a bit ugly.) <edit> I just checked and I'm using v1.19 - not sure if upgrading to v1.2 would help? </edit>
-
Hi everybody! I am completely new to GSAP. First of all I´d like to notice that I really have a hard time to get into this stuff. The documentation isn't that good for a beginner. I neither don't know what kind of plugins or other 3rd party java stuff is needed to use the gsap plugins, nor I really do not get it how to call up funtion to do something with gsap. So, how did I get here? I already programmed a little website for a geocache listing, but on mobile devices the site is kind of slow. Somebody told me to "do the trick" with gsap because it is much faster than jquery. My goal is to change the colors of pictures, borders and text when a checkbox is clicked. Here you can see what I mean: My example website I removed the images (actual code not in the example page) and now want to draw one corner image in 4 canvas. Here is what I got so far. <script> window.onload = function() { var canvas = document.getElementsByClassName("edge_can"); // I gave the canvas a class named "edge_can" / not on the example page! var ctx = canvas.getContext("2d"); var img = new Image(); img.src = "https://www.tissi-solutions.de/caches/matrix/edge.jpg"; ctx.drawImage(img,0,0,100,100); }; </script> Do the canvas need all one "id" or can I use a class to draw 1 picture in multiple canvas? How do I do that? Do I really need canvas for this or can I manipulate the colors by just calling a gsap funtion? Which plugins are needed to change all mentioned colors? Do I need PixiJS for the Pixi plugin? Am I on a right approach or do you think that the speed won´t improve by changing to gsap? Any suggestions are welcomed! Thanks in advance! Tissi
-
I've created an animated landing page for my portfolio using GSAP and ScrollMagic.js, but it's pretty resource intensive and I know my code isn't the most efficient. How can I modify the code to create a smoother and more robust animation? And how can my JavaScript be condensed and more efficiently written to avoid repetition? function pageScroll(e) { var clicked = e.currentTarget.id; if (clicked == "navWelcome") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"header"}, delay:0.3}); }else if (clicked == "arrow") { TweenMax.to(window, 3.5, {scrollTo:{y:"#aboutMeFull"}}); }else if (clicked == "navAbout") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#aboutMeFull"}, delay:0.3}); }else if (clicked == "navServices") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#servicesConBg"}, delay:0.4}); }else if (clicked == "navPortfolio") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#portfolio"}, delay:0.3}); }else if (clicked == "portfolioBut") { TweenMax.to(window, 0.8, {scrollTo:{y:"#portfolio"}}); }else if (clicked == "navContact") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#contact"}, delay:0.3}); } } for (var i=0; i<navBut.length; i++) { navBut[i].addEventListener('click', pageScroll, false); } for (var i=0; i<navItem.length; i++) { navItem[i].addEventListener('click', pageScroll, false); } document.querySelector('#arrow').addEventListener('click', pageScroll, false); //Landing Page $(function() { var xTo = 1.15*window.innerWidth; var yTo = 0.5*window.innerHeight; var rocketTween = new TimelineMax().add([ TweenMax.from("#parallaxContainer #bg", 1, {backgroundPosition:"0 100%", ease: Linear.easeNone}), TweenMax.from("#parallaxContainer #starsSmall", 1, {backgroundPosition:"0 12%", ease: Linear.easeNone}), TweenMax.from("#parallaxContainer #starsLarge", 1, {backgroundPosition:"0 6%", ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #rocket", 1, {y:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #cloudsFront", 1, {y:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #cloudsBack", 1, {y:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #comet", 0.5, {x:-xTo, y:yTo, delay:0.5, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #logo", 0.8, {opacity:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #arrow", 0.07, {opacity:0}) ]);
-
I created this demo which shows a slider with a preloader. The GSAP slider is completely out of sink and doesn't slide on time. How can I load the images and the slider together? It would be nice to have this function working together nicely. Also the fading on the images are a bit glitchy . I might have used to many alphas.
-
Has anyone worked with a library for scroll-based callback functions to use with GSAP in ReactJS? I've been working with a small library but I'm looking for a more robust solution and don't have the time to write my own. I'd rather not use CSS animations with popular libraries like AOS. The goal is to find a library that fires a callback function (which I would use to fire an animation function) when an element reaches a certain offset, exits/enters viewport.
-
I am trying to reveal the black background only after the two red and blue canvases have completed the animation. But as you can see there is "leak" and the black ground is visible during the rotation. Also I'm learning to control overflow and have found this link https://stackoverflow.com/questions/8837050/allow-specific-tag-to-override-overflowhidden , but theres something I'm doing wrong . Please Help.
-
I'm trying to animate all this element on the svg with a bit of sense, so the feet look like the walking:-) I'd like to achieve : - path { they should animate with delay, so I could have the feeling that they are walking. } - line {it's a stroke which should animate from 0 to 100%.} - polygon (are two arrow that should fade.) I hope it's something that you guys could quickly fix.
-
Hi all, I am very new to hand coding and using GSAP and have just got the hang of the basic principles of the tweens and timelines. My problem is I would like to animate a half background during the timeline and after its completed add a mouseenter that animates the same background to the full height. The issue is if the mouse enters before it gets to the timeline it animates the background in, it breaks the mouseenter and does not behave as it should. To replicate check the codepen. Mouseenter before the black half background animates in and it will complete the whole mouseenter function. To see the desired result. Refresh the codepen and do not mouseenter until the black half background animates in. Then mouseenter. Is there a way I can a. add the mouseenter mouseleave functions after a certain point in a timeline? b. use a check else if statement to see if mouse has already entered and still has not left play the rest of the mouseenter animation ? Sorry this is my first post so hope this information and the pen makes sense. Thanks for any advice or help in advance, Chris
-
Hello everybody I am trying to convert, refactor a jQuery animation to pure GSAP. Using gsap.jquery gave several errors. Unlike in the guide written I found one always requires jquery still. I want to convert jquery.animate() to GSAP function. What links and resources are there to help me with converting Jquery to pure GSAP?
-
Hi, This is broad question. How can I create something like the pen i mentioned through GSAP. (A detailed explanation would be really helpful as I'm a noob) Thank you in advance.
-
Hi, How do I animate this ball up and down smoothly. I'm using fromTo but i don't know where to put "repeat:-1"
-
Does Greensock's "No charge" license covers support for envato marketplaces? I want to make a Wordpress Theme/Plugin which will use GSAP as it's animation core and sell it to Themeforest/Codecanyon. As the "No charge" license states that: You may use the code at no charge in commercial or non-commercial apps, web sites, games, components, and other software as long as end users are not charged a fee of any kind to use your product or gain access to any part of it. If your client pays you a one-time fee to create the site/product, that's perfectly fine and qualifies under the "no charge" license. If end users are charged a usage/access/license fee, please sign up for a "Business Green" Club GreenSock membership which comes with a comprehensive commercial license. See http://greensock.com/club/ for details. Use at your own risk. No warranties are offered. Please respect the copyright. Am I allowed to perform my submission to those marketplaces obeying the above terms?
-
hey guys, i'm new to GSAP & I'm not quite sure what I'm doing wrong here. the desired effect is a fade in when the menu opens & a fade out when it closes, but for some reason i can't get the fade out part to work. here is a link to my codepen. i suspect i'm making a pretty dumb mistake. here's my js: var root = document.documentElement; var body = document.body; var pages = document.querySelectorAll(".page"); var tiles = document.querySelectorAll(".tile"); for (var i = 0; i < tiles.length; i++) { addListeners(tiles[i], pages[i]); } function addListeners(tile, page, menu) { tile.addEventListener("click", function() { animateHero(tile, page); }); page.addEventListener("click", function() { animateHero(page, tile); }); } function animateHero(fromHero, toHero) { var clone = fromHero.cloneNode(true); var from = calculatePosition(fromHero); var to = calculatePosition(toHero); TweenLite.set([fromHero, toHero], { visibility: "hidden" }); TweenLite.set(clone, { position: "absolute", margin: 0 }); TweenLite.to('.k-nav-list li', 0.6, {opacity: 0}); body.appendChild(clone); var style = { x: to.left - from.left, y: to.top - from.top, width: to.width, height: to.height, autoRound: false, ease: Power1.easeOut, onComplete: onComplete }; TweenLite.set(clone, from); TweenLite.to(clone, 0.3, style) function onComplete() { TweenLite.set(toHero, { visibility: "visible" }); body.removeChild(clone); TweenLite.to('.k-nav-list li', 0.6, {opacity: 1}); } } function calculatePosition(element) { var rect = element.getBoundingClientRect(); var scrollTop = window.pageYOffset || root.scrollTop || body.scrollTop || 0; var scrollLeft = window.pageXOffset || root.scrollLeft || body.scrollLeft || 0; var clientTop = root.clientTop || body.clientTop || 0; var clientLeft = root.clientLeft || body.clientLeft || 0; return { top: Math.round(rect.top + scrollTop - clientTop), left: Math.round(rect.left + scrollLeft - clientLeft), height: rect.height, width: rect.width, }; } the part that is actually changing the opacity for the element i want is TweenLite.to('.k-nav-list li', 0.6, {opacity: 0}); and TweenLite.to('.k-nav-list li', 0.6, {opacity: 1}); but obviously i'm misunderstanding what's going on here. any help is greatly appreciated. -
I want the car to move after the bicycle has reached its end. (How to trigger a 2nd scene only after the 1st scene is completed ) Thank you in advance
-
I'm working on something like a full screen sections with a big menu that scrolls to left/right depending on the section but I can't get it right. Basically, when the first section ends I want the menu to translate to left and when I scroll up I want it to translate back to right. How can I achieve this? It's something like this http://en.leningrad.io/
-
Hey there, I'm posting as I received some great advice with my animation before. The goal is to have the car follow the route, and it seems to work perfectly on mobile. The pertinent lines of code are below, and shown in action in the codepen .set("#Car", {transformOrigin:"50% 50%", xPercent:-50, yPercent:-50}) .to("#Car", 7, {bezier:{values:MorphSVGPlugin.pathDataToBezier("#CarPath", {align:"#Car"}), type:"cubic", autoRotate:90,},ease:Linear.easeNone}) However on chrome mobile the linked codepen should produce the car doing doughnuts on the grass area offroad. I'm wondering if anyone can help me identify the code causing it. Hopefully you can replicate the issue as a couple of friends couldn't reproduce in on their devices. Thanks for taking your time to read my post. -Tom.
-
Hi, I tried create similar animation in right top which you can see in the picture from this website ( https://waaark.com/ ). In CodePen is my animation. Their animation start from bottom to top but my from all sides to middle. Thank you for your advice.
