Search the Community

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, 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

Anyone here familiar with weborama HPTO and how the hell it works? there is so little documentation that is hard to simply preview a file just to work on it. http://specs.weborama.nl/nl/html-publisher-persgroep-vk_parool-hpto

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

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

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!

XD

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

Hello, as you can see I'm new to the house. LOL I am now starting to use GSAP, and have a website that I know it uses, would like to know the best code to create this animation to load with percentage of the page, with hide in the image and show after the animation. Take the example: https://www.melville-design.com (site using greensock)

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);

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.

Hey guys, I'm new to GSAP and was wondering if there's an easy solution to start the timeline AFTER all assets/images have been loaded. Maybe even with a circular preloader e.g. Thanks for your help

Hi, i´ve got a problem with SplitText which i just can´t figure out. As you can see here: https://codepen.io/VSDC/pen/ZedMzB there is a simple SplitText animation which gets revert() when the animation is done. As the text gets revert it makes a litte jump/bounce. This effect is even stronger when i use webfonts from TypeKit (even after waiting until the font is loaded, before rendering the Timeline). Am i missing something obvious? Thanks a lot for your help!

Hi, I'm using Angular UI-router to build a one-page site with a looping, draggable navigation, and want to use TimelineMax to animate a sprite on the transitions. What I've got so far (see Codepen link) is that when the user drags or swipes the target area, the animation plays or reverses (depending on swipe direction) and the new section loads. So far so good. However, I want the drag/swipe action to actually control the progress of the sprite, so that users can scrub through the timeline. Then, when they release the drag or swipe, the rest of the animation to play and the next page to load. Another thing I've noticed is that once I've swiped through all section of the page and looped back the beginning, the sprite no longer animates - the Timeline just jumps to the next sprite image. If you change direction it then starts working again. Any help greatly appreciated! NB: The individual page content won't load on the Codepen demo, not sure why, but it doesn't matter to the issue I'm trying to resolve here. Cheers.

I've been playing with the morphsvg bow and arrow demo: http://codepen.io/chrisgannon/pen/epZyEK?editors=0010 I was trying to get a wiggle strain when the bow was fully pulled, and using CustomWiggle and rotation with easeInOut produced some cool results, but I was trying to get the Bow and string to relax part of the way back to the relaxed/straight state. Is there anyway to animate a wiggle ease in and out partway back through an animation? Thanks.

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

Hi, I'm fairly new to GSAP and have been getting to grips with it reasonably well i think I'm using scrollmagic and Tweenmax for an image sequence on scroll. The code below works fine locally but when hosted on a server the image sequence is really jumpy and missing images. In chrome i am getting net::ERR_CONNECTION_RESET error in the console window...should i be using some sort of image preloader? have i missed anything? or is there a better / easier solution for this? HTML: <div id="trigger1"></div> <div id="pin1"> <div id="imagesequence"> <img id="myimg"/><br> </div> </div> JS: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script> <script> var controller = new ScrollMagic.Controller(); // define images var images = [ "images/3Drotate/1.jpg", "images/3Drotate/2.jpg", "images/3Drotate/3.jpg", "images/3Drotate/4.jpg", "images/3Drotate/5.jpg", "images/3Drotate/6.jpg", "images/3Drotate/7.jpg", "images/3Drotate/8.jpg", "images/3Drotate/9.jpg", "images/3Drotate/10.jpg", "images/3Drotate/11.jpg", "images/3Drotate/12.jpg", "images/3Drotate/13.jpg", "images/3Drotate/14.jpg", "images/3Drotate/15.jpg", "images/3Drotate/16.jpg", "images/3Drotate/17.jpg", "images/3Drotate/18.jpg", "images/3Drotate/19.jpg", "images/3Drotate/20.jpg", "images/3Drotate/21.jpg", "images/3Drotate/22.jpg", "images/3Drotate/23.jpg", "images/3Drotate/24.jpg", "images/3Drotate/25.jpg", "images/3Drotate/26.jpg", "images/3Drotate/27.jpg", "images/3Drotate/28.jpg", "images/3Drotate/29.jpg", "images/3Drotate/30.jpg", "images/3Drotate/31.jpg", "images/3Drotate/32.jpg", "images/3Drotate/33.jpg", "images/3Drotate/34.jpg", "images/3Drotate/35.jpg", "images/3Drotate/36.jpg", "images/3Drotate/37.jpg", "images/3Drotate/38.jpg", "images/3Drotate/39.jpg", "images/3Drotate/40.jpg", "images/3Drotate/41.jpg", "images/3Drotate/42.jpg", "images/3Drotate/43.jpg", "images/3Drotate/44.jpg", "images/3Drotate/45.jpg", "images/3Drotate/46.jpg", ]; var obj = {curImg: 0}; // create tween var tween = TweenMax.to(obj, 0.5, { curImg: images.length - 1, roundProps: "curImg", repeat: 0, immediateRender: true, ease: Linear.easeNone, onUpdate: function () { $("#myimg").attr("src", images[obj.curImg]); } } ); // init controller var controller = new ScrollMagic.Controller(); // build scene var scene0 = new ScrollMagic.Scene({triggerElement: "#trigger1", duration: 800}) .setPin("#pin1") .setTween(tween) .addTo(controller); var triggerHook = scene0.triggerHook(); scene0.triggerHook(0); </script> Any help or a point in the right direction would be much appreciated