Search the Community

https://staging.thebirdthebear.com/ I'm working on this particular animation, and having some issues. It's a four-branch frilly thing that is supposed to reveal each branch. Triggered with Scrollmagic. You can see it working properly on the first iteration in the section "OUR CRAFT." Each branch is being revealed by removing the respective mask. My issue however, is that the animation is not animating on the second iteration, "BRYAN & CARYN." The masks in the SVG are called out as IDs, but the paths inside the masks are Classes (they're what are being called here in the code below). I'm not sure if that's the issue or what... Thoughts? const branchDraw = function() { const layerOneMask = document.querySelectorAll(".layeronemask") const layerTwoMask = document.querySelectorAll(".layertwomask") const layerThreeMask = document.querySelectorAll(".layerthreemask") const layerFourMask = document.querySelectorAll(".layerfourmask") const tl = new TimelineMax() for ( var i = 0; i < layerOneMask.length; i++ ){ tl .from(layerOneMask[i], 0.5, { drawSVG: 1, ease: Power2.easeOut }) .from(layerTwoMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25") .from(layerThreeMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25") .from(layerFourMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25"); const scene = new ScrollMagic.Scene({ triggerElement: layerOneMask[i], offset: -300 }) .addTo(controller) .setTween(tl) } } branchDraw()

Hi everyone, I have an issue in ScrollMagic. I'm interesting in to find if somebody discovered the same issue. I want to have the same effect on scroll like on the link below. See the last codepen on this link: The plugin reacts instantly on window, on scroll, but on a container has a delay of ~0.5s, only on Internet Explorer. Can anybody explain this?

I'm new to GSAP. Can anyone help me figure out why my animation is running before it's triggered by ScrollMagic?

I would like to know how can I do this kind of 3D movements and interactions on scroll: http://act.mit.edu/cavs https://juliebonnemoy.com/ https://fontface.ninja/ All this examples use a div "scroll-wrapper" as a scroll container with a css: transform: translate3d(0px, -361px, 0px) I always used scrollmagic but now I think its an old solution... recommendation, advice? Thanks!

Im attempting to build a 2 Scene ScrollMagic / GSAP function. Scene 1 is when the content enters the screen, and Scene 2 is when the content is leaving the screen. Scene 1 works fine while using the function's element as a trigger, but when I try to use a child element as the Scene 2 trigger the entire second scene / TimelineMax scene seems to break. --- The first Scene of the function (scene_in) works fine with the triggerElement set as the selector of the parent function: But on the second Scene of the function (scene_out) the triggerElement does not seem to work at all: $('.text-fade-in > ul').each(function(){ var thisSelector = this; var thisLi = $('li', this); var thisLiHeight = thisLi.height(); var fade_in = new TimelineMax(); fade_in.delay(.45); fade_in.staggerFrom(thisLi, .5, {opacity: 0, top: 14, ease: Sine.easeIn}, .15); var scene_in = new ScrollMagic.Scene({triggerElement: thisSelector, triggerHook: 'onEnter'}) .addIndicators({name:"li_fade"}) .setTween(fade_in) .addTo(controller); var fade_out = new TimelineMax(); fade_out.to(thisLi, 1, {opacity: 0, top: -10, ease: Sine.easeOut}, 0); var scene_out = new ScrollMagic.Scene({triggerElement: thisLi, triggerHook: 'onLeave', duration: thisLiHeight}) .addIndicators({name:"li_fade_out"}) .setTween(fade_out) .addTo(controller); });

How can I achieve this scroll animation on the hero sections on this website - https://www.sapientrazorfish.com/ using scrollmagic and GSAP or any plugin you can direct me towards.My main aim here is to achieve the overlapping section and snap effect. Looking at my codepen, I've achieved the overlapping effect but can't just seem to make them snap on scroll just like the website. Any help is appreciated.

I'm working on something like a full screen sections with a big menu that scrolls to left/right depending on the section but I can't get it right. Basically, when the first section ends I want the menu to translate to left and when I scroll up I want it to translate back to right. How can I achieve this? It's something like this http://en.leningrad.io/

Hi gsap people, So I'm a bit at a loss. I did a ton of research to find the best "cross compatible" way to reveal a background image on scroll. Basically it works as intended on chrome in the codepen, a more clear example is above the fold to scroll on https://bell.works/work but you can for sure see it in the codepen. Just some notes - TLDR maybe using svg injector to load the svg circles except for the clippath SVG mask which is inline i'm using objectBoundingBox for the clipPathUnits, otherwise the size of the circle on load less easily controlled, and then I had to tween the attributes of the SVG mask ellipse to get it sized right so it wouldn't be an oval based on browser width, e.g. var relWidth = $("#site-header-area").width(); var relHeight = $("#site-header-area").height(); var $rX = relHeight / relWidth * 0.5; TweenMax.set("#circle-mask", { attr: {cx:0.5, cy:0.6, ry: 0.5 * 0.75 , rx: $rX * 0.75 }, transformOrigin:"center center"}); for the live url https://bell.works/work the mask works like the codepen and intended, but doesn't tween on scroll, BUT if you go to the bottom of the page and back up, it tweens it all open, and then doesn't close it back up like on chrome - does that make sense? it's like there's a big delay in any calculations but it is working, just not bound to scroll I've read a series of posts about similar issues with solutions that don't really work or help: https://stackoverflow.com/questions/44722751/svg-clip-path-not-working-on-safari this bug https://bugs.webkit.org/show_bug.cgi?id=126207 removing -webkit-clip-path property, which worked for some people on safari 11 for some reason I feel like I went down the rabbit hole on this one. Is there something obvious I'm missing? Is there a better way to do this purely with gsap? Should I just quit altogether and make an SVG that looks like a mask with a hole in the middle and then tween the attributes or scale the whole thing on scroll? Any help would be greatly appreciated!

I test different solutions , but I have a question – I'd like to animate only element with class active. Currently the first element animates third element, why? I learn JavaScript, but still a lot of work ahead of me

Hi ! It's possible to achieve the scroll effect in this page (this page use scrollmagic and greensock.) http://www.locus-solus.it/en/pouffe_gae_aulenti The elements continue their animation after scroll is stopped. I dont know if I could achieve this with greensock tween settings or the scrollmagic one Thanks!

Hi Guys, I want to add a scroll magic effect on the website I'm currently working on. First I wanted to get it working in a codepen test. I followed some tutorials and tried to figure out some codepens. What I want to achieve is to let the square move when the element with id: move is triggered. At the moment the tweening starts immediately when the page is loaded. I'm struggling with getting the code work and I don't see what I'm missing. I hope someone can help me. Thanks in advance! Ilse

Hi @DD77! I'm moving our chat back to the public forum as I am no longer messing aroung with the countdown. ( For anybody who were not around during the time, I'm refering to the bellow thread. Yes, I did make too much of a fuss for no particular reason... Soz) So, to the matter at hand. My understanding of what @DD77 needs help with is to have a horizontal scroll that triggers some animation as you move it along. His sample pen is the following: In our private conversation I offered the bellow as a starting point: No animation, just the CSS to have a bunch of horizontal sections. I have no comercial experience with ScrollMagic, I'm going to be reading the docs and making it up as I go along, so, if anyone has anything to add, please do so. Here are ScrollMagic examples: http://scrollmagic.io/examples/index.html and the documentation: http://scrollmagic.io/docs/index.html as guides. What we'll do first is as simple as a test we can do.

I need a click event on (section-2) which will do the following: - Page body changes background colour (adding class="darkerblue").- The main element (clickable) to move across x:500, scale:1.5. - if I click the main element it will revert all. -If I scrollback to previous scene(section-1) it will revert all. From line 93, where I started making the scene for section-2

Not sure why the image on section-2 doesn't center on scroll. I tried everything so far. It should appear from section-1, so with the offset, starts animating . What I'm I missing here? on leave should go back at the start on the left. new ScrollMagic.Scene({triggerElement: "#section-2",offset: -350, duration: $('#section-2').outerWidth(true)}) .on("enter", function(){ $("#anchor2").addClass('selected'); $("#section-2").addClass('animated fadeInUp'); var tl = new TimelineLite(); tl.to("#section-2.fadeInUp .animated-items", 1, { x: getMidX("#section-2.fadeInUp .animated-items")+20 } ); function getMidX( obj ){ return ( $(obj).parent().width()/2 ) - $(obj).width()/2; } }) .on("leave", function(){ $("#anchor2").removeClass('selected'); $("#section-2").removeClass('animated fadeInUp'); tl.to("#section-2.fadeInUp .animated-items", 1, { x: getMidX("#section-2.fadeInUp .animated-items")+20 } ); function getMidX( obj ){ return ( $(obj).parent().width()/2 ) - $(obj).width()/2; } }) .addTo(controller);

I am trying to implement a carousel slider of bootstrap and want the caption to animate when the slider is active. It does animate for first slide but not for others. Below is my code: // Slider var controllerSlider = new ScrollMagic.Controller({vertical: false}); jQuery('.carousel-inner .item').each( function() { var tlSlider = new TimelineMax() .from( jQuery(this).find('h1'), 3, { x: -50, autoAlpha: 0,}) .from( jQuery(this).find('h2'), 3, { y: -50, autoAlpha: 0,}); var scene = new ScrollMagic.Scene({triggerElement: jQuery(this) }) .setTween(tlSlider) .addTo(controllerSlider); });

Hello, I have logo and content on my website. I am able to animate the logo and content on page load. I am using the scroll magic plug-in because when the user scrolls the mouse wheel than animate the elements. Now the issue is, My animation is working together, I mean I have to animate first content then I have to animate the logo. After complete, the animation logo than again I have to animate the content. I tried some code but not working. This is my task I have to animate the header content from bottom to top 70% linearly. then I have to animate logo 50% from top to bottom, and then cross. then again I have to animate the content bottom to top which is the last content. Please help me out with this issue.

Hello, I have one circle and I am using scroll magic. I have to scroll the circle with 360 degrees and after that circle will hide. I mean one it will cross the screen of the desktop that It will hide and then below content will display on the screen using the mouse wheel. Now my code is not working properly. I mean when I am scrolling the mouse wheel and circle start and end in the center of the pc and content also scrolling. I need when circle crosses the desktop screen than content should scroll. Would you help me out in this?

Hi, I am trying to achieve an effect that when I scroll the page I move two different lists of words, and I can see just two word per time (one of each list). After I see the 6 words, I unpin the lists and go to another section. and I know I'm doing it quite wrong, so I'm asking for some help or tips. Thank you.

I am using ScrollMagic with the GSAP Plugin. I am trying to reveal a line based on an animated mask that should sync to the scroll. This demo works on Desktop but not on iOS: https://codepen.io/paul-siteway/full/aVGwEw/ I am not sure if this is an ios, svg, scrollmagic or gsap bug. Any help is appreciated!

I didn't know if there was a showcase thread but I wanted to share my latest website with you all. https://zadesigns.com make sure to check it out on both the Phone and Browser because it's been designed to be friendly to phones. The site was created with Angular 4.4.6 / UI-Router / Material Design / GSAP 15 / ScrollMagic / SplitText Thanks to Jack and everyone at GSAP for making really great products! Been using GSAP since the good old days of Flash. Also congrats on the new Animation UI dev tool! I haven't had a chance to use it yet but I wish I saw it before I made my site! Thanks! Zuriel

Hi forum! How are you today? I'm working on an animation that I want to trigger and sync to the scrollbar, but start in the middle of the page, and return the scrolling the page when finished. This is what I thought about doing: [content] [ANIMATION PLACEHOLDER which is height: 100vh;] [empty section] [ANIMATION which is floating and set to display: none; and height: 100vh;] I put a scroll scene trigger at the start of the ANIMATION PLACEHOLDER section. the animation duration is set by javascript. the duration will change the ANIMATION PLACEHOLDER height to get the correct duration injected into that scroll section: pre-animation: set height of ANIMATION PLACEHOLDER to animation duration (should be 2 screens or 200vh) animation: make ANIMATION appear (I don't want the animation to scroll off screen) make ANIMATION PLACEHOLDER stick to top of it's section (when animation is set to reverse, this will make the placeholder appear in the correct place) move two boxes in the ANIMATION synced to the scroll (for now) make ANIMATION PLACEHOLDER stick to bottom (so it will appear as if you just continued to scroll) make ANIMATION disappear This seems to work for the end of the animation, but the animation (at least the set) starts as soon as the page loads. maybe it has something to do with immediateRender? I want the floating ANIMATION to appear only when the scroll trigger reaches the top of the screen. The animation itself does trigger at the right moment (only when the trigger reaches the top), but the set part happens immediatley thanks for the help Neil

Hello! I'm very new to GSAP and Scrollmagic, but I'm wondering about how to do something specific. I will provide a link below, but basically what I'm wanting to know how to do is have an element tween to a specific point on scroll, then pause, then complete, the tween. Here is the code I'm using currently to make this happen: // Hockey Player Slide var tween = TweenMax.staggerFromTo(".hockey-boy", 1, {left: -600, opacity: 0}, {left: 800, opacity: 1, ease: Linear.ease}, .15); // build scene var scene = new ScrollMagic.Scene({ triggerElement: "#hockey-player", triggerHook: 0, duration: 2000, }) .setTween(tween) .setPin("#hockey-player") .addIndicators({ name: "Hockey Player", }) .addTo(controller); http://empowerplay.webflow.io/ I greatly appreciate anyone shedding some light on this for me! Take care!

Hi everybody, I'll start by saying that Greensock is amazing and I love it Also, great forum! Already found a few solutions by going through some of the threads here. I'm trying to make a character walk on a path when the page scroll reach certain points. After a few tries, I went forward with the following solution: 1. animate the character on each path using top left with percentage so that the horizontal roads can be responsive 2. this way, I can create the entire animation from the start, and just forward the animation to the correct position (or even backwards) 3. potentially, I can make the animation slower of faster to make the character walk faster (this will effect both the sprite animation and the walking) Now, I'm at a point were the basics work. the character follows your scroll (it feels as if he's trying to catch up with you). Later, I'll add more points across the path to make him walk shorter distances Now, i'm having problems with 3 more things I want to accomplish: 1. make him go faster for bigger distances (if you scroll super fast, he should speed up the animation up to a certain max) 2. try and make the tweenTo function start at the same speed as the current speed (but still speed up and slow down overhaul if that's possible) 3. change the direction of the sprite. currently, on reverse(), the character just walks backwards. I want a way to change the sprite's background position to a "up walk" and "left walk" to make it better. Can this be done only by creating two different animations? I would really appreciate any help trying to fix those problems. I'm kind of stuck at this point, reading all the docs I can find

I'm having trouble trying to solve why my TimelineMax does not want to reverse when scrolling up. The timeline appears to autoplay and stop. Any advice? Thank you in advance. <!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>A New Formula for Growth Marketing || G=mc2</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <link href="https://fonts.googleapis.com/css?family=Raleway:100,400|Roboto:100,700" rel="stylesheet"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div id="trigger"></div> <!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <div id="intro" class="header-container fs"> <div class="wrapper"> <section class="section-intro"> <h1 class="green">Heading 01</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p><strong>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis</strong></p> <p class=""> <a href="#slide01" class="button">Find out how</a> </p> </section> </div> </div> <nav> <ul> <li><a href="#intro"><span class="nav-dot"></span><span class="nav-label">Intro</span></a></li> <li><a href="#slide01"><span class="nav-dot"></span><span class="nav-label">Connected</span></a></li> <li><a href="#slide02"><span class="nav-dot"></span><span class="nav-label">Don't drop</span></a></li> <li><a href="#slide03"><span class="nav-dot"></span><span class="nav-label">New Formula</span></a></li> </ul> </nav> <div class="main-container"> <article id="slide01" class="slide fs"> <div class="wrapper"> <section class="section-left"> <h1 class="green">Heading 02</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p><strong>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis</strong></p> </section> <section class="section-right"> <div id="animate1"> <svg width="600" height="600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 250"> <g id="group_01" class="cls-1"> <g class="rect_01"> <rect class="rec_blue" x="157.5" y="119.5" width="50" height="10" transform="translate(307 -57.5) rotate(90)"/> <rect class="rec_green" x="142.5" y="119.5" width="50" height="10" transform="translate(292 -42.5) rotate(90)"/> </g> </g> <g id="group_02" class="cls-3"> <g class="rect_02"> <rect class="rec_blue" x="150" y="62.5" width="50" height="10"/> <rect class="rec_green" x="150" y="77.5" width="50" height="10"/> </g> <g class="rect_02"> <rect class="rec_blue" x="100" y="112.5" width="50" height="10"/> <rect class="rec_green" x="100" y="127.5" width="50" height="10"/> </g> <g class="rect_02"> <rect class="rec_blue" x="200" y="112.5" width="50" height="10"/> <rect class="rec_green" x="200" y="127.5" width="50" height="10"/> </g> <g class="rect_02"> <rect class="rec_blue" x="150" y="162.5" width="50" height="10"/> <rect class="rec_green" x="150" y="177.5" width="50" height="10"/> </g> </g> <g id="group_03"> <g class="rect_03"> <rect class="rec_blue" x="107.5" y="69.5" width="50" height="10" transform="translate(207 -57.5) rotate(90)"/> <rect class="rec_green" x="92.5" y="69.5" width="50" height="10" transform="translate(192 -42.5) rotate(90)"/> </g> <g class="rect_03"> <rect class="rec_blue" x="207.5" y="69.5" width="50" height="10" transform="translate(307 -157.5) rotate(90)"/> <rect class="rec_green" x="192.5" y="69.5" width="50" height="10" transform="translate(292 -142.5) rotate(90)"/> </g> <g class="rect_03"> <rect class="rec_blue" x="107.5" y="169.5" width="50" height="10" transform="translate(307 42.5) rotate(90)"/> <rect class="rec_green" x="92.5" y="169.5" width="50" height="10" transform="translate(292 57.5) rotate(90)"/> </g> <g class="rect_03"> <rect class="rec_blue" x="207.5" y="169.5" width="50" height="10" transform="translate(407 -57.5) rotate(90)"/> <rect class="rec_green" x="192.5" y="169.5" width="50" height="10" transform="translate(392 -42.5) rotate(90)"/> </g> </g> <g id="group_04"> <g class="rect_04"> <rect class="rec_blue" x="157.5" y="19.5" width="50" height="10" transform="translate(207 -157.5) rotate(90)"/> <rect class="rec_green" x="142.5" y="19.5" width="50" height="10" transform="translate(192 -142.5) rotate(90)"/> </g> <g class="rect_04"> <rect class="rec_blue" x="57.5" y="119.5" width="50" height="10" transform="translate(207 42.5) rotate(90)"/> <rect class="rec_green" x="42.5" y="119.5" width="50" height="10" transform="translate(192 57.5) rotate(90)"/> </g> <g class="rect_04"> <rect class="rec_blue" x="257.5" y="119.5" width="50" height="10" transform="translate(407 -157.5) rotate(90)"/> <rect class="rec_green" x="242.5" y="119.5" width="50" height="10" transform="translate(392 -142.5) rotate(90)"/> </g> <g class="rect_04"> <rect class="rec_blue" x="157.5" y="219.5" width="50" height="10" transform="translate(407 42.5) rotate(90)"/> <rect class="rec_green" x="142.5" y="219.5" width="50" height="10" transform="translate(392 57.5) rotate(90)"/> </g> </g> <g id="group_05" class="cls-6"> <g class="rect_05"> <rect class="rec_blue" x="100" y="12.5" width="50" height="10"/> <rect class="rec_green" x="100" y="27.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="200" y="12.5" width="50" height="10"/> <rect class="rec_green" x="200" y="27.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="50" y="62.5" width="50" height="10"/> <rect class="rec_green" x="50" y="77.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="250" y="62.5" width="50" height="10"/> <rect class="rec_green" x="250" y="77.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="50" y="162.5" width="50" height="10"/> <rect class="rec_green" x="50" y="177.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="250" y="162.5" width="50" height="10"/> <rect class="rec_green" x="250" y="177.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="100" y="212.5" width="50" height="10"/> <rect class="rec_green" x="100" y="227.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="200" y="212.5" width="50" height="10"/> <rect class="rec_green" x="200" y="227.5" width="50" height="10"/> </g> </g> <g id="group_06"> <g class="rect_06"> <rect class="rec_blue" x="57.5" y="19.5" width="50" height="10" transform="translate(107 -57.5) rotate(90)"/> <rect class="rec_green" x="42.5" y="19.5" width="50" height="10" transform="translate(92 -42.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="257.5" y="19.5" width="50" height="10" transform="translate(307 -257.5) rotate(90)"/> <rect class="rec_green" x="242.5" y="19.5" width="50" height="10" transform="translate(292 -242.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="7.5" y="69.5" width="50" height="10" transform="translate(107 42.5) rotate(90)"/> <rect class="rec_green" x="-7.5" y="69.5" width="50" height="10" transform="translate(92 57.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="307.5" y="69.5" width="50" height="10" transform="translate(407 -257.5) rotate(90)"/> <rect class="rec_green" x="292.5" y="69.5" width="50" height="10" transform="translate(392 -242.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="7.5" y="169.5" width="50" height="10" transform="translate(207 142.5) rotate(90)"/> <rect class="rec_green" x="-7.5" y="169.5" width="50" height="10" transform="translate(192 157.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="307.5" y="169.5" width="50" height="10" transform="translate(507 -157.5) rotate(90)"/> <rect class="rec_green" x="292.5" y="169.5" width="50" height="10" transform="translate(492 -142.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="57.5" y="219.5" width="50" height="10" transform="translate(307 142.5) rotate(90)"/> <rect class="rec_green" x="42.5" y="219.5" width="50" height="10" transform="translate(292 157.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="257.5" y="219.5" width="50" height="10" transform="translate(507 -57.5) rotate(90)"/> <rect class="rec_green" x="242.5" y="219.5" width="50" height="10" transform="translate(492 -42.5) rotate(90)"/> </g> </g> <g id="group_07" class="cls-8"> <g class="rect_07"> <rect class="rec_blue" y="12.5" width="50" height="10"/> <rect class="rec_green" y="27.5" width="50" height="10"/> </g> <g class="rect_07"> <rect class="rec_blue" x="300" y="12.5" width="50" height="10"/> <rect class="rec_green" x="300" y="27.5" width="50" height="10"/> </g> <g class="rect_07"> <rect class="rec_blue" y="112.5" width="50" height="10"/> <rect class="rec_green" y="127.5" width="50" height="10"/> </g> <g class="rect_07"> <rect class="rec_blue" x="300" y="112.5" width="50" height="10"/> <rect class="rec_green" x="300" y="127.5" width="50" height="10"/> </g> <g class="rect_07"> <rect class="rec_blue" y="212.5" width="50" height="10"/> <rect class="rec_green" y="227.5" width="50" height="10"/> </g> <g class="rect_07"> <rect class="rec_blue" x="300" y="212.5" width="50" height="10"/> <rect class="rec_green" x="300" y="227.5" width="50" height="10"/> </g> </g> </svg> </div> </section> </div> <!-- .wrapper --> </article> <article id="slide02" class="slide fs"> <div class="wrapper"> <section class="section-left"> <header> <h1 class="green">Heading 03</h1> </header> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p><strong>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis</strong></p> </section> </div> <!-- .wrapper --> </article> <article id="slide03" class="slide is-light fs"> <div class="wrapper"> <section class="section-left"> <header> <h1 class="green">Heading 04</h1> </header> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p><strong>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis</strong></p> <a href="#" class="button">Watch our video</a> </section> </div> <!-- .wrapper --> </article> </div> <!-- #main-container --> <div class="footer-container"> <footer> <h3> 2017 &copy; The Company, All rights reserved.</h3> </footer> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> <script src="js/main.js"></script> </body> </html> .clear:before, .clear:after { content: ' '; display: table; } .clear { *zoom: 1; } .clear:after { clear: both; } /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: 400; } dfn { font-style: italic; } h1 { font-family: 'Roboto', Helvetica, Helvetica Neue, Arial, sans-serif; font-weight: 100; font-size: 2.5em; margin: .67em 0; } h2 { font-family: 'Raleway', Helvetica, Helvetica Neue, Arial, sans-serif; font-size: 1.2em; font-weight: 400; } p { font-family:'Raleway', Helvetica, Helvetica Neue, Arial, sans-serif; line-height: 1.5; font-size: 1.2em; font-weight: 100; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace,monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto; } input[type=search] { -webkit-appearance: textfield; box-sizing: content-box; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: 700; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */ html { color: #222; font-size: 1em; line-height: 1.4; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } audio, canvas, iframe, img, svg, video { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ===== Initializr Styles ================================================== Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template ========================================================================== */ body { } .wrapper { width: 80%; margin: 0; } /* Make the body 100% of the browser viewport height */ html, body { height: 100%; margin: 0; } .green { color: #79BC6F; } .blue { color: #37A6DE } .dark-blue { color: #1F1645; } /* ========================================================================== Author's custom styles ========================================================================== */ /* =Header */ .header-container { text-align: center; color: #ffffff; background: #1F1645; } .header-container .wrapper { padding-top: 120px; z-index: 2; } .rec_blue{ fill:#35a8e0; } .rec_green{ fill:#79bc6f; } #animation-01{ position: absolute; } .cls-3 { opacity: 0.9; } .cls-4 { opacity: 0.8; } .cls-5 { opacity: 0.7; } .cls-6 { opacity: 0.5; } .cls-7 { opacity: 0.3; } .cls-8 { opacity: 0.1; } /* =Navigation */ nav { display: none; position: fixed; right: 30px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: right; z-index: 100; } nav a { display: block; line-height: 25px; position: relative; padding-right: 20px; color: #ffffff; text-decoration: none; } nav a:hover .nav-label { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; visibility: visible; } nav .nav-dot { display: block; width: 10px; height: 10px; position: absolute; right: 0; top: 50%; background-color: rgba(255, 255, 255, 0.5); border-radius: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } nav .nav-label { display: block; opacity: 0.5; visibility: hidden; -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); -webkit-transition: all 0.2s cubic-bezier(.17, .67, .83, .67); transition: all 0.2s cubic-bezier(.17, .67, .83, .67); } nav.is-dark a { color: #1F1645; } nav.is-dark .nav-dot { background-color: #1F1645; } nav ul { margin: 0; padding: 0; } nav li { width: auto; list-style: none; } .scroll-hint { position: absolute; bottom: 30px; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* =Main */ .fs { height: 100vh; } .slide { color: #ffffff; position: relative; } .slide .wrapper { padding-top: 120px; text-align: center; } .slide#slide01 { background: #1F1645; } .slide#slide02 { background: #1F1645; } .slide#slide03 { color: #212121; background: #632c2d; background: -webkit-gradient(left top, left bottom, color-stop(0%, #e6e9ed), color-stop(100%, #ffffff)); background: -webkit-linear-gradient(top, #e6e9ed 0%, #ffffff 100%); background: linear-gradient(to bottom, #e6e9ed 0%, #ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e9ed', endColorstr='#ffffff', GradientType=0 ); } .slide#slide03 .button { border-color: rgba(0, 0, 0, 0.7); color: #212121; } .slide#slide03 .button:hover { border-color: #212121; background-color: #212121; color: #ffffff; } .slide#slide04 { background-color: #be4c2c; } .button { text-decoration: none; color: #ffffff; border: 1px rgba(255, 255, 255, 0.7) solid; padding: 8px 15px; margin-top: 15px; display: inline-block; position: relative; } .button:hover { border-color: #ffffff; background-color: #ffffff; color: #000000; -webkit-transition: background-color 1s ease-out; -moz-transition: background-color 1s ease-out; -o-transition: background-color 1s ease-out; transition: background-color 1s ease-out; } /* =Footer */ .footer-container { text-align: right; background-color: #1F1645; padding: 0 10%; } .footer-container h3 { font-size: 0.8em; color: #37A6DE; margin: 0; padding: 20px 0; font-weight: 100; } .footer-container a { color: #FEFEFE; } /* =Simple animation up */ .no-touch .slideInUp { visibility: hidden; opacity: 0; -webkit-transition: all 0.7s ease-out; transition: all 0.7s ease-out; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } .no-touch .is-active .slideInUp { visibility: visible; opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* ========================================================================== Media Queries ========================================================================== */ @media only screen and (max-width: 768px) { .wrapper { width: 80%; margin: 0 10%; } .section-left { float: left; width: 100%; } .section-right { float: right; width: 100%; } } @media only screen and (min-width: 768px) { h1 { font-size: 2.5em } /* =Header */ .header-container .wrapper { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 0; padding: 0; } .section-left { float: left; width: 35%; margin-right: 5%; } .section-intro { text-align: left; width: 35%; margin-right: 5%; } .section-right { float: right; width: 50%; margin: 0 5%; } .slide .wrapper { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: left; } nav { display: block; } } /* ========================================================================== Helper classes ========================================================================== */ .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* ========================================================================== Print styles ========================================================================== */ @media print { *, *:before, *:after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } @media print { * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } $(function() { // Setup variables var ctrl = new ScrollMagic.Controller(); var timeline01 = new TimelineMax(); var $rect_01 = $(".rect_01"), $rect_02 = $(".rect_02"), $rect_03 = $(".rect_03"), $rect_04 = $(".rect_04"), $rect_05 = $(".rect_05"), $rect_06 = $(".rect_06"), $rect_07 = $(".rect_07"); // Animate equal sign and fade out timeline01 .to($rect_01, 1, {rotation:-90, transformOrigin: "middle center", ease:Power2.easeOut}) .to($rect_02, 0.5, {scale: 1.5, transformOrigin: "middle center", ease:Power2.easeOut, delay:-0.4}) .to($rect_02, 0.3, {scale: .5, autoAlpha: 0, transformOrigin: "middle center", ease:Power2.easeIn, delay:-0.4}) .to($rect_03, 0.5, {scale: 1.4, transformOrigin: "middle center", ease:Power2.easeOut, delay:-0.4}) .to($rect_03, 0.3, {scale: 0.4, autoAlpha: 0, transformOrigin: "middle center", ease:Power2.easeIn, delay:-0.4}) .to($rect_04, 0.5, {scale: 1.3, transformOrigin: "middle center", ease:Power2.easeOut, delay:-0.4}) .to($rect_04, 0.3, {scale: 0.3, autoAlpha: 0, transformOrigin: "middle center", ease:Power2.easeIn, delay:-0.4}) .to($rect_05, 0.5, {scale: 1.2, transformOrigin: "middle center", ease:Power2.easeOut, delay:-0.4}) .to($rect_05, 0.3, {scale: 0.2, autoAlpha: 0, transformOrigin: "middle center", ease:Power2.easeIn, delay:-0.4}) .to($rect_06, 0.5, {scale: 1.1, transformOrigin: "middle center", ease:Power2.easeOut, delay:-0.4}) .to($rect_06, 0.3, {scale: 0.1, autoAlpha: 0, transformOrigin: "middle center", ease:Power2.easeIn, delay:-0.4}) .to($rect_07, 0.5, {scale: 1.1, transformOrigin: "middle center", ease:Power2.easeOut, delay:-0.4}) .to($rect_07, 0.3, {scale: 0.1, autoAlpha: 0, transformOrigin: "middle center", ease:Power2.easeIn, delay:-0.4}) ; // Scene 01 var scene01 = new ScrollMagic.Scene({ duration: 800, offset: 50, reverse: true, triggerElement: "body", triggerHook: 0, }) .addIndicators() .setTween(timeline01) .addTo(ctrl); });

Hi I'm trying to work out why this code isn't working. I would like to scan the document to find every instance of and element with a class of bcg-parallax and then run the code below: if (window.matchMedia("(min-width: 767px)").matches) { var controller = new ScrollMagic.Controller(); $(".bcg-parallax").each(function(i, item){ var newIndex = i + 1; var itemRef = '.bcg-parallax:nth-of-type(' + newIndex + ')'; var parallaxTL = new TimelineMax(); parallaxTL.from(itemRef + '.bcg-parallax .content-parallax', 0.4 , {autoAlpha: 0, x:'+100px', ease:Power0.easeNone},0.4) .from(itemRef + ' .bcg', 1.8, {y:'-50%', ease:Power0.easeNone},0); new ScrollMagic.Scene({ triggerElement: item, triggerHook: 1, duration: '100%' }) .setTween(parallaxTL) .addIndicators() .addTo(controller) }); } I'm using the css rules plugin, but this code at this time is hiding the first instance of the .content-parallax and thats it. It is not firing any events at the point of scroll. Basically I want the animation to be relative to the elements position on the page. Any ideas, I'm really struggling. Thanks