Search the Community
Showing results for tags 'gsap'.
-
Hello people! I am struggling with this, what i want to do in my website is to click a link, take you to another page and also execute an animation. Basically im working a page with kind of tabs done with GreenSock, so for example, in my index i have two buttons to visit, Apple and Pear. If i click Pear, it will take me to a page that displays me Pear tab instead of Apple. That's it. Forgive my english! Its not my native language. Anyways this is the website im working on http://gamacreativos.com/combarranquilla_wp/recreacion-y-deportes/ (spanish website) for example, i want to click in Hospedaje button, and then load the page in the Hospedaje tab instead of Unidades de Servicio. Thanks!
-
Hi guys, I'm trying to recreate a very crude version of the functionality on this site - https://emmitfenn.com/ . As you can see my codepen is working as intended at the moment, but my problem is when I try add another element into the main div (the class for these is UIMenuSlice), the calculations that I have applied don't seem to be adding up correctly. I was hoping some of the wizards in here would be able to shed a light as to how I slightly rejig the calculations I have to allow me to adapt this into a flexible build. There are only 4 elements at the moment but i'd like to be able to change this as possible. Thanks all.
-
Hey there, i am trying to reverse/change the color of a logo based on the section its in. I got it working so far but i am kinda wondering if its the right and most performant approach (i kinda guess it isn't) I basically wont to use it on different subpages and the number of sections is variable. Thanks a lot, much appreciated const controllerMobile = new ScrollMagic.Controller(); const innerStart = new TimelineLite(); const innerEnd = new TimelineLite(); const outerStart = new TimelineLite(); const outerEnd = new TimelineLite(); innerStart.to('.js-logo__inner', 0.1, { fill: 'pink' }); innerEnd.to('.js-logo__inner', 0.1, { fill: 'orange' }); outerStart.to('.js-logo__outer', 0.1, { fill: 'orange' }); outerEnd.to('.js-logo__outer', 0.1, { fill: 'pink' }); const changeLogoStartTrigger = document.querySelectorAll('.js-change-logo--start'); const changeLogoEndTrigger = document.querySelectorAll('.js-change-logo--end'); function changeLogoStart() { changeLogoStartTrigger.forEach((triggerStart) => { const sceneChangeLogoStart = new ScrollMagic.Scene({ triggerElement: triggerStart, reverse: true, triggerHook: 0.065, offset: 0, }) .setTween(innerStart) .setTween(outerStart) .addIndicators() .addTo(controllerMobile); }); }; function changeLogoEnd() { changeLogoEndTrigger.forEach((triggerEnd) => { const sceneChangeLogoEnd = new ScrollMagic.Scene({ triggerElement: triggerEnd, reverse: true, triggerHook: 0.015, offset: 0, }) .setTween(innerEnd) .setTween(outerEnd) .addIndicators() .addTo(controllerMobile); }); }; changeLogoStart(); changeLogoEnd();
-
On my site, I am using a plugin inView, which calls a function when an element has come into view in the page. There is a div in the middle of the page, and i'd like to use this to fade in it and come from the bottom TweenMax.from(element, 1.5, { autoAlpha: 0, y: 100, ease:Expo.easeOut }) The thing is it works, however if I quickly scroll down to this div, I'll see it for a millisecond, a quick flash....and then the effect starts. I tried to use the .set function and set it to autoAlpha: 0...however now it doesn't even fade in at all. Is there a solution to this problem? I'd like to use .from, however I do not want to see it flash quickly on the page before it starts the animation.
-
Hey, I've wondered on how you can use GSAP with Angular2 if anyone here have done that. I loaded the TimelineMax.min.js in my main index.html-file, but having problem importing it into a component. My component look like this: import {Component} from 'angular2/core'; //import {TweenLite} from 'gsap/src/minified/TweenLite.min.js'; //import {TimelineMax} from 'gsap/src/minified/TimelineMax.min.js'; //import {TL} from 'gsap/src/minified/TimelineMax'; import {TL} from 'gsap/src/uncompressed/timelinemax'; @Component({ selector: 'opning', templateUrl: './components/opning/opning.html', styleUrls: ['./components/opning/opning.css'] }) export class OpenCmp { constructor() { console.log("played"); console.log(TL); // console.log(TweenLite); // var tl = new TimelineMax(); /*var logo = $("#logo"); tl.from(logo, 4, { z: 500, y: 74, visibility: "visible" }); //tl.from(logo, 2, { left: "632px" }); tl.play(); */ } } I installed gsap with npm install gsap so it is in my projects /node_modules/ . Have tried several approaches, but i can not set tl = New TimelineMax() in that typescript class and I dont know how to load\import it. Anyone done this with angular2 ? I used this as my starting point: https://github.com/mgechev/angular2-seed
-
Hi, I'm creating a basic banner in Adobe Animate and need to reveal some text using a moving clipping mask. I've tried creating a traditional clipping mask using animate and then animating the mask using TweenMax, but this doesn't seem to work. Any suggestions? Many thanks Tony
-
I am trying to morph SVG on scroll. I have two shapes with id's #shape-1 and #shape-2. What I want is after say 20px of scroll shape-1 morphs into shape-2 and when we again scroll back up the shape-2 reverts back to shape-1. I am able to morph the first time but can't seem to get the proper logic to morph every time the user scrolls above or below a certain scroll value (20px for instance).
-
Hi there! I'm a total newbie but already enjoying playing around with Greensock. I'm working on an accordion menu, and this is the behavior I'm going for: 1. User clicks on a menu item. 2. Menu item's panel is revealed. 3. A sequence of three animations is triggered within that one panel. 4. User clicks to collapse menu item and the whole thing is reset. Right now, the fader animation I have on animEvent is triggered on window load and subsequent user clicks change nothing. I'm thinking I need to use TimelineLite to start the animation when the specific menu item is clicked. But I'm very new to this and would appreciate someone pointing me in the right direction. Thanks! Hilary
-
Hi, I'm a novice when it come to this stuff but I've recently set up a holding page for a friend of mine and she wanted a video on it. However I found out that a video is no good in iOS devices as it starts off paused, and you have to click to play it. Therefore I started browsing the net to find a solution, which seemed to be to turn the video into an image sequence. Thats when I found this example codepen http://codepen.io/jamiejefferson/pen/aJcGl So I used the Javascript and bits of the CSS to create my code http://codepen.io/anon/pen/pgrQZO . However as you can see it is very glitchy? I've been trying to iron out the flickering but with no luck. Any ideas how to smooth it all out, as I'm really stuck!? Many Thanks in advance for any help! http://greenwich-design.co.uk/clients/guiltydolls/guilty_dolls2/
-
Hi, i do some basic mistake in my code, please look to my codepen. You will see in result title/subtitle than empty hole and at the end two closing links. But I wanted to have visible some form/marketing stuff which i call .js-main-boxies and hidden divs with classes .js-cta-form1 and .js-cta-form2. My timelines are paused by default, so question is why I see broken version and not correct one? pen is without CSS so problem can not be in that. When you remove timelines tlMeetingFormClose and tlOnlineFormClose it works, but of course closing functions not. Interesting is that when you click on "form 1 close", than click on "click 1" you will see posibility of clicking to "form 1 close", but it is not working. Any help or advice appreciated thx
-
I've done this before, and i can't figure out why it's not working this time. I'd like to increase the width of #tube-liquid at a certain point in my timeline. Right now i have the property set as .to(tubeLiquid, 2, {scaleX:50}); The scale of the rectangle will not increase, and it's simply ignoring me not giving me an error. What am i missing when it comes to using ScaleX, ScaleY within GSAP?
-
Hey guys, I'm trying to create an animation for a cup of coffee that has hot steam leaving it. The idea is to have 2 curved lines that constantly move up on the y-axis. The top and bottom of the paths are hidden behind a mask. My goal is to have the paths constantly move up with the illusion that it's constant. Right now you can see the path has to stop, then reset its position before moving back up. I hope this makes sense. Is this possible?
-
Hello! I am currently trying to mimic the effect on this website: http://brightmedia.pl/ If you scroll down in my codepen you can see a similar effect with the line being drawn. I was wondering if anyone knew/has done this before and could provide me any additional information in: A. How do I keep the point of drawing in the middle of the window B. How do I go about adding extra paths to the animation? Do I get seperate SVGs to trigger on scroll? Thanks for any help in advance
-
Hello all, I have encoutered two problems with gsap. The first one is that I want to make a filter animation with gsap, in which I may modify several css filter properties at the same time. -webkit-filter:saturate(1) hue-rotate(0deg) brightness(1) contrast(1)) grayscale(0.5) How can I set these filter properties in gsap timelineLite? Expecting the similiar way like transform: timelineLite.to(element,{x:100,scaleX:2,rotation:30}) And How can I get these filter properties in separately in progress ? Expecting the similiar way like transform: element._gsTransform.rotation The second one is that how does gsap perform in mobile device with dozens of elements animating at the same time,maybe 30 or 40, and each element animation many have several tweens. Under this situation,which will perform better, css animation or gsap? Any help very much appreciated! I'm looking forward to your reply, thank you very much.
-
Greetings to all, I came across a fade out & in between pages tutorial using pushState (https://inkplant.com/code/fade-out). The code used is as follows: function fancy_nav(new_url,new_title) { window.new_url = new_url; window.new_title = new_title; var animationOutTl = new TimelineLite({onComplete:change_content}); animationOutTl .to.... .to....; } function change_content() { source_url = window.new_url; $.ajax(source_url).done(function(data) { $('body').html(data); history.pushState(null, window.new_title, window.new_url); document.title = window.new_title; var animationInTl = new TimelineLite(); animationInTl .to.... .to....; }); return true; } What I can't get around, is how to set the popState to reverse the animations (animationOutTl & animationInTl) when the browser back button is clicked. Any assistance will be greatly appreciated. Thank you for your time
-
Hello. Trying to figure out a way to use fade out and fade in when user clicks on navigation. Essentially, user click on navigation, the current page fades out, and the clicked navigation page fades in. $(document).ready(function () { //navigation button that appears on the home page var aboutpageButton = $('#aboutpageButton'); //homepage id var homepage = $('#homepage'); //aboutpage id var aboutpage = $('#aboutpage'); aboutpageButton.addEventListener("click", function() { //add code for page fadeout //e.preventDefault(); TweenMax.to(homepage, 3,{opacity:0}); TweenMax.from(aboutpage, 3,{opacity:0}) }); }); any help greatly appreciated. Thanks!
-
Hi again forum. So we've been noticing this for several months, and it's in both Flash and GSAP. When we use from tweens, whether it be TweenLite, TweenMax, or TweenNano, the elements initially load in their starting position, before the .from positions are initiated, giving a poor load experience. An example would be: http://codepen.io/GreenSock/pen/yyBGYg Notice all the elements pop onto stage, then go to their starting positions. It seems to be mostly an issue in Chrome. It's strange, because I've built many a unit previously that this never would happen in, and then one day it just started happening. I must prefer using from tweens vs to tweens so this error does cause extra work. Any ideas?
-
Hello, I am trying to mimic an animation -> the first scroll animation on this page https://www.box.com/ So far as you can see from my codepen I have mimic'd it (Kind of). I am looking for better ways/any extra help/tips and tricks anyone can give me. Please go ahead and fork my codepen, and give it a go for yourself. I may have done it completely wrong, this is a learning experience for me. Hope to see some comments in this discussion. It's a pretty hard animation to mimic. Should I be using SVGs to mimic this animation? Thanks
-
Hello, For some reason when I add 'position: absolute' to my 'box' class, it breaks my whole animation. Any explanation why is greatly appreciated. Cheers
-
XD
-
I'm getting pixelation when using pixi.js sprites with gsap. I doubt this is a gsap or pixi problem, I'm sure it has to do with how I'm combining them. in the codepen example: pixiBug on left is pixi.js & gsap and we're getting pixelation on scale down domBug on right is DOM & gsap and edges are smooth no matter the scale. What am I missing here? Thanks!
-
Hi, I am working with GSAP + ScrollMagic. There in codepen when you scroll to bottom you can see "eating animation" it is sprite animation based upon shifting background. Well my problem is visible when "burger is gone" and you try to scroll up. You will see backward animation of eating which in my case is not what I want. Is there a way how to play some animations only in "one way"? Idealy completly avoid "eating" animation when you go up. I tried to google it and search, but without result, if it is already answered please send me link. Thx
-
Hello! I have some issue with show elements. I fill svg line with help property stroke: function pathPrepare ($el) { var lineLength = $el[0].getTotalLength(); $el.css("stroke-dasharray", lineLength); $el.css("stroke-dashoffset", lineLength); } But I don`t know how can show element when fill before it (elements are hidden). They are conected only alike scene and they have absolut position. Maybe GSAP or Scrollmagic have some functions for decide this problem? Or maybe give me some hints. My code: // Init ScrollMagic var ctrl = new ScrollMagic.Controller({ globalSceneOptions: { triggerHook: 0, tweenChanges: true, duration: ScreenHeight } }); // Create scene $("section").each(function(){ new ScrollMagic.Scene({ triggerElement: this }) .setPin(this) .addTo(ctrl); }); var processLine = '#process-line'; // prepare SVG pathPrepare($(processLine)); var s4Tween = new TimelineMax(); s4Tween.to($(processLine), 1, {strokeDashoffset: 0, ease:Linear.easeNone}) .add(TweenMax.to(processLine, 0, {stroke: "#3495d1", ease:Linear.easeNone}), 0); // Create scene var scene4 = new ScrollMagic.Scene({ triggerElement: "#section3" }) .setTween(s4Tween) .addIndicators({name: "1 (duration: svg)"}) .addTo(ctrl);
-
After i uploaded the .zip file to the browser it shows 3 errors 1-Missing Primary asset check 2-Relative asset check 3-secure URL check I used Edge animate And in the creation complete i used "" var mobile = sym.$("mobile"); var logo = sym.$("logo"); var t1 = sym.$("t1"); var bx1 = sym.$("bx1"); var buynow = sym.$("buynow"); TweenLite.from(mobile, 1, {y: "30",alpha:0, delay:1,ease: Back.easeOut }); TweenLite.from(logo, 1, {alpha:0, delay:2,ease: Sine.easeOut }); TweenLite.from(buynow, 1, {scaleX:0,scaleY:0,alpha:0, delay:4,ease: Elastic.easeOut }); TweenLite.from(bx1, 1, {x: "30",alpha:0, delay:2.5,ease: Back.easeOut }); TweenLite.from(t1, 1, {y: "10",alpha:0, delay:3,ease: Back.easeOut }); "" i need help please !! I can't understand what to do ?
-
I'm at a loss here folks. lol Basically, if you check out the Codepen, and try to scroll up or down no scrolling occurs... If you manually resize the window then the scrolling magic happens. Has anyone encountered anything like this before? Thanks, Nick
