Search the Community

I'm trying to come up with a "better" way to write these morphSVG animations. The issue is that I have about 100+ paths I want to animated all at once. Everything works fine but I'm assuming there must be a more efficient way to do this, maybe with some sort of loop and an array? Then a function that gets called each time it loops? As of right now my project has like 2000 lines of JavaScript and I'm not even finished! In the codepenn you will find a small example with six different elements I'm morphing at the same trigger point. Thanks in advance and have a great day everyone! Kind regards, -Bruno

Hello ! Sooo, I'm trying to play a little with ScrollTo plugin and ScrollMagic.js my goal is to achieve smooth scroll to the bottom of the footer (that works) http://codepen.io/Dikus/pen/jAjoqN and then (after the user scrolls once up on the footer element) go back to the view where top of the footer is right at the bottom of the viewport. Problems I encountered: Scrolling works only once and only in one direction - usually ScrollMagic reverses all animations etc.so after scrolling back up from the bottom of the footer It would be lovely to achieve smooth scrolling in both sides and always when user is navigating through the website - not only once I bet it's possible, and that I do something terribly stupid Can you guys please help and give me some hits how to work this out? Maybe it's not possible to do this with ScrollTo and ScrollMagic but they are not a must. Any help will be more than welcome !

Hi There, Im not sure if this is strictly a GSAP issue as I don't quite where the problem lies. I am trying to make use of a little GSAP/ScrollMagic on a Wordpress site but it keeps throwing an error. It is a custom theme I am making so shouldn't be other script conflicts as it is very minimal build so far. I am enqueue the scripts in my functions file like: function my_theme_scripts_function() { wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js',array(), false, true ); wp_enqueue_script( 'scrollmagic-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js', array(), false, true ); wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/scripts.js', array(), false, true); } add_action('wp_enqueue_scripts','my_theme_scripts_function'); then just for testing have tried using the below in my scripts file: var controller = new ScrollMagic.Controller(); var myTest = new ScrollMagic.Scene({duration: 200}) .triggerElement('#hero1') .setTween(testTween) .addIndicators() .addTo(controller); but I keep getting the same error: scripts.js?ver=4.5.3:33 Uncaught TypeError: (intermediate value).triggerElement(...).setTween... is not a function any ideas ?I have checked in console log and GSAP is loaded, I have tried adusting the code adding jquery or gsap-js dependencies, I have tried the links with and without https and http, and nothing seems to make any difference. Am I missing something obvious?(I realise I could just try linking to them in the head of the document but I would rather try and load them in the "correct" way if possible) Cheers D

Hi GSAP's! I have 2 <section>'s. As the vistor scrolls, I'd like to fade in the second section. On that second section, there's a hyperlink. The problem: The hyperlink is already clickable before the second section is visible. Please hover the bottom area of the first (green) section on my CodePen URL to see what I mean. Is there a way to activate the hyperlinks as soon as the second section is completely visible? Thanks in advance

Hi All, I'm fairly new to JS, so I'm sure I've made a silly mistake. But I am unable to get a morph tween to trigger using ScrollMagic. What I want to do is fairly simple, I have an svg ribbon made up of three paths, I want to morph the first two into the third as a user scrolls. I've watch and read lots of tutorials, but can't see where I am going wrong. Thank you in advance. Ritch

I am new to all this so please forgive any issues or formalities I seem to not follow or understand. I tried putting my stuff in a codepen as requested but it does not work at all when I did so not sure what I did wrong there. i use Google Chrome and Firefox to try and toubleshoot my code but still learning there as well. I am on a MacBook Pro using El Capitan OS. The issue I had was after scene 3 my animations would not work yet the first few scenes worked great. You can see it in action if you like at http://justawebbie.com/centennial/index.html. I am just not sure what I did wrong I went over the code to see if I misplaced a comma or bracket but do not see one thing out of whack. Please and thank you for any help anyone can offer to a newbie.

Hi, I am useing scroll magic for first time and i got stuck.... everything works fine but what when i click on buttons(social media, design, etc... ) the scroll should get disable and normal animation should play without scrolling and when scroll again my animation should get active on scroll... Please see below link to have an idea http://fbapps.ae/centric_2016/ thanks in advance for help! Mustafa

Hi all - I know there are some keen scrollmagic'ers on here so thought it ok to give it a post. The problem i'm having is setting up multiple instances of Scrollmagic using an each statement. In the attached pen they all seem to be following the one call instead of their individual states. Any pointers kind folks?

Hey all! I'm VERY new to GSAP and ScrollMagic but now using both in some capacity. I was wondering if anyone can help me as I want to create a universal ScrollMagic function/controller to then trigger my already created GSAP animations at the correct point on scroll. I'm really hoping this can be done so I can maybe include a class (like 'animate-me') in the HTML which then triggers the animation when scrolling past. A lot of this will be content managed to it need to flexible. I've done this in the past using the more simple WOW.js, obviously not with GSAP though. Cheers, Richard

I'm creating a relatively complex nav layout for a single-page scrolling site using GSAP and ScrollMagic. The "upcoming" page in the navigation tweens upward as you scroll down until it hits the top of the nav, and then a page transition is triggered (which is unrelated to this issue). I've included a stripped-down Codepen with only the Nav - please view it in Full View using Chrome or Firefox to see the effect working properly. The value it's tweening to achieve that effect is relatively complicated - it's top: calc(-100vh + [nav container height] + [2x nav bottom property]) which has the effect of moving each item up but maintaining the same spacing once they're stacked at the top. I know there's an outstanding issue with tweening calc() values that's been on GitHub for a while - you can't tween them unless you first use TweenMax.set to establish the pre-tween calc value. Using that workaround got it to work in Chrome and Firefox, but it's still not working in Safari. Instead Safari waits until the end of the ScrollMagic duration and then simply jumps to the end value. I'm not sure what to do about this issue - I've tested it in Safari and tweening a non-calc value works fine, but I need a calc in order to achieve the effect I want. Any help would be appreciated!

Hi Guys, I'm creating a website where I have to animate (approx. 50) svg lines from bottom to top of the screen in different tempi. I made it with staggerFromTo, but then I can't randomnize the the speed of each lines (se the attached image). Now I'm trying to create this with a for loop where i add tweens to a timelineMax, but I cant get it to work var thinLineArr = []; var num = Math.ceil(ww/lineThickness); transitioncontainer.css({'height':wh}); // Adding all the lines to the scene var svg = '<svg id="transition-top-svg" version="1.1" xmlns="http://www.w3.org/2000/svg">'; for (var i = 0; i < num; i++) { var line = '<path class="transition-line" d="M ' + (lineThickness * i) + ' 0 l 0 ' + wh + '" />'; thinLineArr.push($(line)); svg += line; }; svg += '</svg>'; transitioncontainer.append(svg); //Starting Scrollmagic var timeline = new TimelineMax() for (var k = 0; k < num; k++) { timeline.add(TweenMax.from(thinLineArr[k], 2, {scale: 0})); } var scene = new ScrollMagic.Scene({ triggerElement: "body", duration: 1000, offset: 100 }) .setTween(timeline) .addTo(scrollMagicController);

I've been at this for a few days now (starting with Skrollr and now ScrollMagic), and I just can't figure it out: If I create an SVG animation - it completes 100% on my laptop screen. If I view the animation on a larger screen (with more viewport height), the animation doesn't complete (unless I allow the viewport to go beyond the footer, creating blank space). My question is this: how should I use ScrollMagic trigger points in a responsive design where the height of the viewport changes? I initially thought that I could trigger them on the percentage that the actual scrollbar has been scrolled - thus keeping everything in proportion (ie, fire SVG line when the scrollbar has been scrolled 50%), but it seems like this is not the case. If anyone could provide clarification on this, I would REALLY appreciate it! ps, I can create a CodePen if needed - though this is quite a general question that will be applied to animations throughout the site.

So I'm using scrollmagic for an infographic, and I have a smooth scroll plugin that I was trying to use that hasn't been updated in a while (last used in January), but TweenMax has! The script is throwing all sorts of errors and completely breaking the animation. I'm getting the error "Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': 2 arguments required, but only 0 present." Anyone know how to update this script? It's at the bottom of the js on my codepen.

I'm trying to create an infographic using scrollmagic/greensock, where I have everything in layers, and each layer tweens down to nothing as you scroll down, so whatever is beneath it is revealed on scroll. I already tried using svgs and clippaths, which was a nightmare since I'm new to them and scrollmagic both. So I decided to use css border-radius. My problem right now is that I'm trying to scale these down and nothing seems to be happening. If I look in my console I will see the styles scaleX: 0 and scaleY: 0 have been applied but the image will still be the same width and height. It doesn't move at all.

I am a Jquery novice, and would have thought the solution to my problem to be quite simple, however I have tried a million permutations of this code and I can't solve it. I am using Scrollmagic and GSAP, and want to trigger three tweens from the same point, so that they fire one after the other (with a slight overlap). The scenes have duration: 0 so that the user only starts the animation, but does not control its progress. Each tween contains a css transform, to work on the same object (#boxes3d). The effect I am going for is : 1) The boxes start flat, but are exploded into 3D by changing the css perspective value to 850px. 2) The boxes rotate 180 degrees by changing the css transform value. 3) The boxes are collapsed again by reverting to perspective: 50000. [ 4) The animation reverses when the user scrolls back past the trigger.] The complication is that the transform value must also incorporate a dynamic scale value in order to make the absolutely positioned divs inside #boxes3d fit the frame at any screen size. The scale value (and therefore the whole transform) is set dynamically by another Jquery function: scaleDiv() which contains the nested rotate3D() and reverse3D() functions. I think I need to create a timelineMax (or Lite) to queue the tweens, but I am having problems putting dynamic css values into the timeline. I have created a jsfiddle (not a codepen - sorry - I hope that doesn't matter too much) with the tweens/transitions that I want to string together, along with the scaleDiv function that must be incorporated into the second tween. At present they have separate scenes, but I want to put them all into one scene/timeline. Here is the fiddle: http://jsfiddle.net/gbinning/vccxufou/13/. I would really really appreciate some guidance! Thank you v much! Edit: I haven't quite set up the scaleDiv function correctly, you need to slightly resize the window to trigger it.

I've been attempting to create what would first appear as a simple parallax-style scrolling page using TweenMax and scrollmagic, however making it work responsively has proved difficult. Essentially, what i'm after is for a page to load with a header image and a h1 title in a 70%/30% split, with the banner position fixed to the top of the page, resizing to 50% window height as the page scrolls and the h1, being pulled up above the header image and fading to 0 opacity. Once the header image hits 50% window height, it should unpin and the rest of the content should scroll up to a negative offset, just overlapping the header image, and then scroll as normal. Difficult to explain textually so the codepen referenced is annotated and should explain things better. I've tried everything I can think of here but after the first scene ends, the pin-spacer's min height adjusts itself for reasons i can't figure out and then won't return to it's previous value on reversing scroll. I suspect aligning the lower header with javascript isn't best but CSS didn't work much better either. Any and all ideas are really appreciated. Thanks

Sorry Im a new user of greensock . I want to achieve a 100% screenHeight scroll whenever user scroll until the trigger : ================================================================================ var tween7b = TweenMax.fromTo('#red2', 1, {y: "100%"}, {y: "0%", backgroundColor:'#C74A00', ease: Linear.easeNone}); var tween7c = TweenMax.to('#red2', 1, {y: "-100%", backgroundColor:'#C74A00', ease: Linear.easeNone}); new ScrollMagic.Scene({triggerElement: "#trigger6e", triggerHook: 0.85}) .setTween(tween7b) .addTo(controller); new ScrollMagic.Scene({triggerElement: "#trigger6e", triggerHook: 0.45}) .setTween(tween7c) .addTo(controller) .addIndicators(); ================================================================================== Sometimes its work, but sometimes it failed. I guess its getting confused because of two TweenMax.fromTo affected the same ID ? how could I achieve what I want then? thankyou before

Dear All, I am using the Avada theme + ScrollMagic, but I get this following error in the console in Firefox: ReferenceError: TweenMax is not defined In the theme's functions.php I am trying to enqueue the scripts and add/delete dependencies, but I still can't get it to work: wp_enqueue_script( 'jquery', false, array(), $theme_info->get( 'Version' ), true ); //LAURAN BEGIN//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //wp_deregister_script( 'TweenMaxMin' ); wp_register_script( 'TweenMaxMin', $template_directory . '/assets/js/1lauran/TweenMax.min.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'TweenMaxMin' ); //wp_deregister_script( 'ScrollMagic' ); wp_register_script( 'ScrollMagic', $template_directory . '/assets/js/1lauran/ScrollMagic.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'ScrollMagic' ); //wp_deregister_script( 'animationGsap' ); wp_register_script( 'animationGsap', $template_directory . '/assets/js/1lauran/plugins/animation.gsap.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'animationGsap' ); //wp_deregister_script( 'debugAddIndicators' ); wp_register_script( 'debugAddIndicators', $template_directory . '/assets/js/1lauran/plugins/debug.addIndicators.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'debugAddIndicators' ); //wp_deregister_script( 'lauranScrollMagic' ); wp_register_script( 'lauranScrollMagic', $template_directory . '/assets/js/1lauran/lauranScrollMagic1.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'lauranScrollMagic' ); //LAURAN EINDE///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// And this is my script: //jQuery(document).ready(function($){ jQuery(document).ready(function(){ // place custom JS here console.log("DOM ready"); // window, links, and other assets loaded jQuery(window).on("load", function(){ // or place custom JS here to make sure DOM is ready and the window is loaded console.log("window, links, and other assets loaded"); var images = [ "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_01.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_02.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_03.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_04.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_05.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_06.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_07.png" ]; // TweenMax can tween any property of any object. We use this object to cycle through the array var obj = {curImg: 0}; // init controller // create tween var tween = TweenMax.to(obj, 0.5, { curImg: images.length - 1, // animate propery curImg to number of images roundProps: "curImg", // only integers so it can be used as an array index repeat: 3, // repeat 3 times immediateRender: true, // load first image automatically ease: Linear.easeNone, // show every image the same ammount of time onUpdate: function () { $("#myimg").attr("src", images[obj.curImg]); // set the image source } } ); var controller = new ScrollMagic.Controller({loglevel: 3}); // build scene var scene1 = new ScrollMagic.Scene({triggerElement: "#imagesequence", duration: 220}) .setTween(tween) .addIndicators() // add indicators (requires plugin) .addTo(controller); var scene2 = new ScrollMagic.Scene({triggerElement: ".box2"}) .setTween("#animate1", 0.5, {backgroundColor: "green", scale: 2.0}) // trigger a TweenMax.to tween .addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin) .addTo(controller); var scene3 = new ScrollMagic.Scene({triggerElement: '#containerLauran',duration: 300}) .setPin('#blockLauran') .addIndicators() .addTo(controller); var scene4 = new ScrollMagic.Scene({triggerElement: '#containerLauran2',duration: 200}) .setPin('#blockLauran2') .addIndicators() .addTo(controller); }); }); All scripts seem to have been added/enqueued correctly if I check the html structure with the Firefox inspector. All scripts are added in the right order as enqueued in the functions.php file of the WP-theme. Can someone help me out? It looks like if I am almost there... Thanks! Lauran

Hi everyone, hope you are fine. I am getting better and better with scrollMagic / gsap but when I am thinking about doing something simple, it's always giving me a hard time. I choose to use ScrollMagic with GSAP because I have some sprite to use with a parallax effect. Instead of losing you with too many code lines, go straight to the point, here is my codepen demo : http://codepen.io/anon/pen/bdXqzw In this example you can see a simple square that change to position fixed with new background-color. The thing is, at the end of the scrolling scene, I want my square to go "slowly" (1seconde animation) at the left of the screen with animation. Then it has to stay "absolute" of section if you continue on scrolling down. But as you know, if you scroll back you are supposed to have your animation going back, and I am lost about it. Thank you in advance for reading my post and maybe help me !

Hi. I have a website here. http://olle.dyndns-ip.com/tunity/ I'm using ScrollMagic to controll the start and stop of the blue buttons in the side of some of the sections. It is working good. However I want to make the code more slim and effective. Like it is now if I add one more section I have to create one more tween and one more scene. So the code I have for the moment is. var rad1 = new TweenMax.to('.fordjupning1', 1, {y: '150'}); var rad2 = new TweenMax.to('.tillbaka2', 1, {y: '450'}); var rad3 = new TweenMax.to('.tillbaka3', 1, {y: '1050'}); var rad4 = new TweenMax.to('.tillbaka4', 1, {y: '650'}); var rad5 = new TweenMax.to('.tillbaka5', 1, {y: '450'}); var rad6 = new TweenMax.to('.tillbaka6', 1, {y: '450'}); var rad7 = new TweenMax.to('.tillbaka7', 1, {y: '450'}); var rad8 = new TweenMax.to('.tillbaka8', 1, {y: '800'}); var rad9 = new TweenMax.to('.tillbaka9', 1, {y: '800'}); var rad10 = new TweenMax.to('.tillbaka10', 1, {y: '800'}); var scene1 = new ScrollMagic.Scene({ triggerElement: '#rad1',duration: 200, offset: -50, reverse: true }) .setTween(rad1) .addIndicators() var scene2 = new ScrollMagic.Scene({ triggerElement: "#rad2", duration: 400, offset: -50, reverse: true }) .setTween(rad2) .addIndicators() var scene3 = new ScrollMagic.Scene({ triggerElement: "#rad3", duration: 1000, offset: 50, reverse: true }) .setTween(rad3) .addIndicators() // and so on controller.addScene([ scene1, scene2, scene3, scene4, scene5, scene6, scene7, scene8, scene9, scene10 ]); I have trie the code from this question (edited for my website) #215 But it does not do it. $('.tillbaka10').each(function(){ var currentStrong = this; var tweenStrong = new TimelineMax() .to(currentStrong, 1, {y: '800'}); var scene = new ScrollMagic.Scene({triggerElement: currentStrong, duration: 800, offset: 50, reverse: true}) .setTween(tweenStrong) .addTo(controller); }); So how can I make this in an efficient way? With classes as the trigger? Or how is it done? Regards Olle

Does anyone know of a good example of a ScrollSpy-ish being used with ScrollMagic and GSAP ? I've been working on a little something, but it's giving me some trouble. It works, but some numbers are hard coded.. and I really think there's a better way. I'm also working on a codepen of the very basics of it.. . but in the meantime, has anyone already created this sort of thing? Thanks,

Hello I want to create a animation in which following events occurs 1) A custom horizontal scrollbar on the bottom of the page,this bar ro remain constant and do not move 2) A horizontal navigatable website( using magicscroll.js) 3) All the animation is related to horzontal scroll movement of the custom horizontal bar Animation required 1) As soon as i move the below horizontal bar the #cover div should reduce the opacity for the radius and the div behind it should be visible. How is this animation achievable using GSAP. Please help I am a newbie to GSAP

I've been trying multiple different ways of setting up the animation sequence but something is off with the duration and delay on the tween. Please let me know what I've done wrong. I'm trying to have a series of sections scroll in with a pinned child div for the text content and then have few divs animate in once the section is inView. But the autoAlpha and easing of the divs go by too quickly to be seen. Even when I set the delay and duration to 1000. It's easiest to see the whole sequence on my test page: flm.pushdesign.net I'm at a loss... I need your help. I'd be grateful for any suggestions. Cheers, Shannon

Hello Every One, I would like some advice from this community of experienced interactive animators! I've been tasked with a "simple" scroll-based animation. With the first part of it featuring simple collision detection of circular objects. I'm wondering if I should FAKE the physics with static animation, OR use some kind of simple 2D physics with collision detection. I'll be using ScrollMagic to control a TimelineMax sequence, animating with SVG elements. Here is a brief overview of the animation: About 10 circles of various sizes float in 2D space, bouncing off each other, and showing a stressed effect on impact. (This could either be sortof random, or hard coded.. this is what I'm asking advice on. ) After a few collisions, the scroll based animation continues.. Next, a few circles highlight and overlap instead of colliding.. THEN, the overlapping section highlights.. A ven diagram.. Then, that ven diagram (oval) shape is animated in some way.. I have TWO primary questions: Should I use .svg elements with the image tag: <img id="circle1" src="image.svg"> or as that big string of svg code? Should I FAKE the collision detection? or implement some sort of simple 2d physics engine w/collision detection that I don't know about? (is there a GSAP class for this?) ALSO, any general advise about how to execute this would be helpful. Thanks in advance! -HaunGO

I am using GSAP along with a ScrollMagic plugin to time my animations using the user scroll. Everything works great on desktop, animations are smooth and look nice. But when I load the site on tablet and mobile issues start to show up. I have an iPad and a Galaxy S4, and the galaxy is performing much better than the iPad is. On scroll for the Galaxy there is a short jump at the start, past that the animations are a bit slow but work in general. When it comes to the iPad, the animations are nonexistant... on scroll everything locks up and moves for the scroll, then it seems to reload and moves everything to where they should be instantly. There is no tweening or easing happening and creates a very poor experience on tablet. Im looking for a way to improve performence on mobile / tablet and allow tweening and easing to happen at all on tablet. Thank you