Search the Community
Showing results for tags 'gsap'.
-
Hi All, I've been using GSAP for 2 months now and It has saved me a LOT of time and headache. It is an awesome library. Recently I discovered that I can use Scroll Magic library with GSAP and I've been trying to make an animation using both of them. Here's the link to my codepen demo: The idea is that as we scroll down the page, the text "DESIGNWORX" should translate to the left and at the same time opacity should animate from 1 to 0. I've achieved that. The problem I'm facing is that I want to reverse this animation i.e the text "DESIGNWORX" should translate back and opacity animate from 0 to 1 ONLY when I reach the top of my page while scrolling back. I've tried to do that by using "triggerHook" method as you can see in my pen but sadly I've failed. I've also searched all over the internet for answers but all in vain. I was hoping if someone could help me in this regard. I'm not an expert in javascript and would really appreciate any tips or help. Thanks in advance! Ali
-
I have installed gsap using bower and then used gulp with mainBowerFiles to compile it into my vendors.js minified file. However when I try to write any GSAP code, it simply says that TweenLite (or TweenMax) is not defined. Is there any help to be had in using GSAP in this way?
-
I'm building an intro animation in Codepen and I wanted to tween the pseudo element `.marquee__tagline--logo::before`. I saw that this can be done using CSSRulePlugin, however it is just keeps throwing out errors. The pseudo element is showing up in dev tools, and it clearly is rendering on the page, so I'm unsure of what I'm doing wrong here. Any help would be greatly appreciated!
-
I'm using PHPStorm* (http://www.jetbrains.com/phpstorm/) for a project at work and I'm using GSAP in a javascript file that's part of the project. Having difficulties getting it to recognize the GSAP libraries — and others, to be sure, such as enquire.js. Specifically I keep getting getting warnings such as unresolved type TimelineMax unresolved type TweenMax I've gone through PHPStorm's process for adding external libraries to the project (http://www.jetbrains.com/phpstorm/webhelp/configuring-javascript-libraries.html), but no dice. Has anyone used GSAP with JetBrain's products — WebStorm, PHPStorm — and had any success at besting this? *Which is essentially WebStorm+PHP -
In the attached codepen I have a timeline in which `blocks` stagger into the display. That all works fine and well, but I'd like to make it so that the `autoAlpha` property runs a bit quicker than the rest -- for instance 300ms rather than 600ms. Is there any way of achieving this type of interaction with certain properties within a stagger going quicker than the rest?
-
Hello everyone. I know that there is topic about angular but I have checked every topics without having an answer to my problem. My problem is simple. How to implemenent properly ScrollMagic and gsap to an Angular-Cli (2/4) app. I have installed: npm install gsap npm install scrollmagic I have added to my .angular-cli.json: "scripts": [ "../node_modules/gsap/src/uncompressed/TweenMax.js", "../node_modules/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js", "../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js", "../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js", ], In my component, I have: import { TweenMax } from 'gsap'; import * as ScrollMagic from 'ScrollMagic'; import "ScrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js"; import 'ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js'; And I use in my script.: TweenMax.to(calculator, 1.5, { scale: 2 }) ... new ScrollMagic.Scene(...) .setTween(TweenMax.to(calculator, 1, { scale: 2 })) And i get the following error: Cannot read property 'to' of undefined If I remove the path of TweenMax in angular-cli.json, and I remove the import of animation.gsap.min.js, the following action works. TweenMax.to(calculator, 1.5, { scale: 2 }) but the next action: .setTween(TweenMax.to(calculator, 1, { scale: 2 })) doesnt work and I have this error: (ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js And if I just remove the import {TweenMax} from 'gsap' in my component, I get the following error: ./~/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js Module not found: Error: Can't resolve 'TweenMax' in 'D:\...\...\node_modules\ScrollMagic\scrollmagic\minified\plugins' @ ./~/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js 3:53-103 @ ./src/app/cv/cv.component.ts @ ./src/app/app.module.ts @ ./src/main.ts @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts So If someone know how to install it properly, that would be great. Thank you. -
Hi If I use tweenmax and a couple of the plugins on a site - is it possible to combine all the 3 source scripts (for instance. tweenmax, cssrule plugin, drawSVG plugin) into one file to save on load times / http requests? If so how would I go about doing this, would I just cut & paste the code from all 3 un-minified files into one file, and then minimise the combined file? At the moment I'm just using tweenmax (which i then link to my main.js file for when I add tweens etc obviously) Or is this just a bad idea all round? Emily
-
hello guys, i have problems with safari because my animations are very slow and in chrome is very fast, Can someone help me with this ? in this moment I use scrollMagic a example of my code !!! let animationParallax = new TimelineMax() .to(".Somos__Header", 20, {y: "-140%", ease: Linear.easeNone}) this.somosScene = new ScrollMagic.Scene({ triggerElement: ".Somos__Container" , duration: '50%', offset: -300 }) .setTween(animationParallax) .addTo(controller) url: http://2017.monoku.com/
-
Hey guys, Thanks for your help in advance. I have a problem when repeating the tween, it stops at the end of each iteration, and starts playing again. Since the stop is quite obvious, so I want to remove it, is there any way to do that? Another problem is that, even I am using `Power0.easenone` on it, it seems like there is still an ease-in applying to the tween? Is this the default behaviour of `Power0.easenone` or did I do something wrong so the ease function wasn't applied to the tween? Thanks.
-
Hi. I can't seem to make GSAP run well on Safari. I made a simple example which runs smooth in IE, Chrome, Firefox except for Safari, where it ends up choppy. I've seen this happen not only with GSAP, but js in general, where it just can't refresh fast enough, though I don't know what's that about. I'm fairly new to coding and I would appreciate any help on how to do SVG animation properly for all the browsers. Thank you, Rojus.
-
I'm new to banner development and I'm pretty much on my own. Living and learning... I've built quite a lot of DCMs without any issues. My DCM template is pretty solid already but this template I created doesn't work well with other formats and ad platforms. I ran into a lot of issues while doing DCRM and sizmek ads. I've tried BannerTime and I liked it for the most part like being able to choose which platform specific template to use and all but it's using smart objects and stuff which the dumb me doesn't really see the point of using all that while every KB counts. I also noticed that it served the ad right in the middle of the page horizontally and vertically. I also do not see the point of that. Aren't ads supposed to be at the top left corner by default? But I digress. I'm scared if I changed something, it would break something else. I plan to create my own builder in the future once I gain more understanding on the requirements of each ad platform. For now I just want a very minimal builder that can create boilerplates for different ad platforms with gsap so that I don't run into any more issues. That's it. Please help if you know any. Thank you. Oh and does anyone run into issues by using outdated templates? I don't know why ad platforms do not make it easy to get the latest stable templates. So, it would be great if it's a builder that is being updated quite regularly. -
Hi I have a tween on a transformed span that i can't get to work properly. I need to change the transformOrigin, but because the parent element is rotated 270deg it's created a bit of an issue (codepen link attached). I've commented out a line on the timeline, which shows how I would like the animation to fade out, but having it so the line scales up from the bottom causes it to jump out of position. Is there a solution under the current HTML layout, or is the fact I'm using spans (with inline-block added) part of the problem? I've tried a number of different things but none of them seem to work. Kind regards, Paul.
-
Hi guys! I'm having a bit of trouble here with Draggable util. I am trying to make a tabbed interface on mobile, made of a horizontal container which can be scrolled in the X axis with sections, and sections which can have any number of posts, and can scroll in the Y axis. With draggable, this works great in desktop when using a mouse, but when on mobile (Android, iOS, or Chrome Inspector as mobile), the X axis won't budge. You can watch it in action in the codepen. Any insight on it would be greatly appreciated
-
I have created a sliding portfolio gallery type of page and having the hardest time getting safari in particular to render smooth animations and scrollto's. I originally was using scrollmagic and tweenmax which was extremely choppy and could not be used, I re-wrote the page to use only Tweenmax and the ScrollToPlugin, it's much better now, but when I have the images visible, the page is still a bit choppy. I am wondering if there is anything I can do to up the performance. Link: http://melissamorgandesign.com/portfolio Here are the tweens that are going on, the trouble seems to be scaling the div/bgimage while scrolling with scrollto. Going horizontal also adds a wrinkle. TweenMax.to(window, 1.5, {scrollTo:{x:$("#div" + section).offset().left - 30}}); TweenMax.to("#div" + section, 1, {width:"60vw"}); TweenMax.to("#div" + section + " .subsection1", 0.2, {height:" 30vh", delay:0}); TweenMax.to("#div" + section + " .subsection2", 0.2, {height:" calc(70vh - 3.5vw)", delay:0}); TweenMax.to("#div" + section + " .subsection1 h2", 0.5, {fontSize: "48px",autoRound: true, delay:1}); TweenMax.to("#div" + section + " .subsection1 .portfolio-description", 0.5, {autoAlpha: 1, display:'block', delay:1}); TweenMax.to("#div" + section + " .next-jump", 0.5, {autoAlpha: 0, delay:.1}); Any thoughts for smoothing this out?
-
I successfully implemented a native slider from Framer to control the timeline, instead of using jQuery and the jQuery UI slider library. My main problem emerged when I realized that the timeline events [onComplete, onProgress...] were not trigger at all. Here is the prototype. Sadly, I don't know how to isolate the bug or recreate this outside of Framer, but essentially my code goes as follows. init = new TimelineMax({onComplete:updateSlider}) # hSection is an Framer layer init.from(hSection, .5, {opacity: 0, y:"+=200", ease:Power3.easeInOut}, 0) # footer.children is an Framer layer with elements within init.staggerFrom(footer.children, .5, {opacity: 0, y:"+=25", ease:Power3.easeInOut}, -.15) # Here is the slider component slider = new SliderComponent width: Screen.width / 2 height: 20 # Here is the slider event that I used to drag and affect the timeline progress. This works like a charm. slider.on "change:value", (event, ui)-> init.progress(ui.value ).pause() return # Here is the function that needs to be triggered the moment that timeline is completed. Nothing happens. updateSlider = () -> print init.progress() Can you help me out? CoffeeScript code
-
We are an emerging company in the healthcare space looking for a developer with experience in landing page development that is expected to last 1-2 weeks. Must be experienced with Javascript/Jquery, Greensock (other animation libraries), responsive design, and css3 transitions. We are open to location, but would prefer someone in the United States. We have specifications available for applicants to review upon request. If you have any questions or are interested in the role please reply below or at jermaine@care-advisors.com. Cheers, J
-
Hi guys - To create a tween that animates as you scroll what do you need exactly? I am referencing both tweenmax and scrollmagic and I also added the gsap animation plugin. No matter what I do this doesn't seem to want to work. Please help!
-
gsap How to make animations and image load after the page is loaded
vibhor4all posted a topic in GSAP
Hi, I created a project using GSAP TimelineMax Plugin where the text on the left side slides in the original position from the left (kind of like fade in). var timeline = new TimelineMax(); timeline.from(".main-text-home-cta h2", 1, {x:-100, opacity:0},0) .from(".main-text-home-cta h4", 1, {x:-100, opacity:0},0) .from(".buttons-under-nested-rows", 1, {x:-100, opacity:0},0) .from(".devices-chat-picture", 1, {x:100, opacity:0}); The code above the code i used and added near the </body> tag and the TimelineMax and TweenMax JS files above the code. The problem i am facing is that when the page loads the text appears on the screen in its original position (the position it will after the animation completes) for few seconds (or till the time the page is loading) without animation and as soon as the page load is completed the animation starts. So I want to know whether this a problem with GSAP Plugin or I am doing something wrong. And also I want to know how to fix this so that while the page load nothinng will be shown in the view and after the page loads the animation will start. One more problem that I faced is that when the animation starts after the page load it is very slow and laggy (again I don't kow whose problem is this). Thanks. -
Hello! I've been looking into creating an effect that I see a lot of modern websites using. Im not sure if im meant to be using scrollmagic or not but it seems like quite a good library to plugin to gsap. Here's an example of the effect that I am trying to create http://lamoulade.com/#!/home The website above displays items on the webpage while you scroll. I am looking at creating something similar. I thought the best place to start was to create a bezier curve, and have it only animate along the curve while I scroll - the only problem is, I have NO idea where to start. Should I be looking at ScrollMagic's 'pinning' of objects and have them set to containers? Not sure. Thanks in advance to anyone that posts any information on this topic. Cheers!
-
Hello GSAP, Why do you lose font treatment (font styles, line breaking, ...) when i do splittext to you with this kind of html code <div class="section-desc"> <h2>My Line 1</h2> <p class="l2">My Line 2</p> <p class="l3">My Line 3</p> </div> Thanks, Carlos
-
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
