Search the Community
Showing results for tags 'gsap'.
-
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
-
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?
