Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'scrollmagic'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. Hi, My issue is to do with triggering a nested timeline in reverse, using Greensock and ScrollMagic. I realise ScrollMagic is a separate library but the difference in behaviour I am experiencing is to do with creating timelines either inside a function, or directly on a scrollmagic scene, so I hope somebody can possibly help. I have created two codepens that sort-of replicate my issue. Unfortunately my actual issue is client work so I can't show the same code. But I've recreated the crux of the issue. Additionally my actual code has a pinned element rather than these elements being separate, but hopefully this is enough to explain my issue. Expected behaviour: Scroll down the page - section 1 animation staggers out, section 2 animation staggers in. Scroll down again, section 2 animation staggers out, section 3 animation staggers in. Scroll back up the page - section 3 animations staggers out, section 2 animation staggers in. Again, section 2 animation staggers out, section 1 animation staggers in. I have created a function for fadeIn and fadeOut, and I then create another function "section2Anim", "section3Anim" that is a timeline containing both fadeout and fadein, in order for these two to happen at exactly the same time. (It's not visible on my demo because I don't have the element pinned, but on my pinned version, doing them at the same time basically means one set of dots appear to transform into the next set of dots. Problem: So, I found that the smoothest way to do this, which worked super well for me, when scrolling down the page, is method one, creating section2Anim as a function, and then applying it to the scrollmagic scene. This is this bit of my code: var section2Anim = function () { var tl = new TimelineMax(); tl .add(fadeOutAnimation('#section1 svg circle'), 0) .add(fadeInAnimation('#section2 svg circle'), 0); return tl; }; new ScrollMagic.Scene({ triggerElement: '#section2' }) .setTween(section2Anim) .addTo(controller); You can see this working nicely scrolling down the page in my first codepen, however it does not work in reverse when scrolling up : I have found that the only way to make it work in reverse too, is to not use the function and instead directly assign section2Anim to be the new TimelineMax. like this : var section2Anim = new TimelineMax(); section2Anim .add(fadeOutAnimation('#section1 svg circle'), 0) .add(fadeInAnimation('#section2 svg circle'), 0); new ScrollMagic.Scene({ triggerElement: '#section2' }) .setTween(section2Anim) .addTo(controller); You can see this working both forwards and backwards in my second codepen : So why not just use the latter method, you ask? Well my problem is, as soon as I use this latter method instead in my client code, my animation starts not working properly from the outset, it leaves some of the dots behind (the SVG circles), and doesn't fully trigger the animation. It seems to get stuck and lag, even when just scrolling down. After a while of scrolling it may start to work smoothly. What I am confused about is that in my first method, assigning the function, the animation works really smoothly which is what I want! But I just need it to work in reverse... and because this is all fairly new to me and I am not the best at Javascript anyways (more of a CSS gal), I am confused about why one way reverses and the other way doesn't. I should mention I have also tried some other things with the second method, like pausing the timeline, then playing it on enter of the scroll magic scene, sadly it was still laggy. I appreciate my demo does not show the lagginess or leftover dots, because I had to cut them down for the demo, so maybe this seems fine. But I just can't wrap my head around why the first method, assigning the function of "section2Anim" to the scroll magic scene, works so nicely, but doesn't reverse, whilst the second does reverse, but doesn't work nicely in my actual code. Any help at all much appreciated, thanks so much. Panda
  2. Hi, I just started out working with GASP, taking baby steps. The first thing I wanted to do, was to use ScrollMagic to draw a SVG path (inside a container) as the page is being scrolled through. I heavily relied on this ScrollMagic example when setting this up. This is my current script: // Prepare SVG function pathPrepare_journey($el) { var lineLength_journey = $el[0].getTotalLength(); $el.css("stroke-dasharray", lineLength_journey); $el.css("stroke-dashoffset", lineLength_journey); } var $journey1 = $("path#path1"); var $journey1_2 = $("path#path2"); var $journey1_3 = $("path#path3"); pathPrepare_journey($journey1); pathPrepare_journey($journey1_2); pathPrepare_journey($journey1_3); // Reference to container var container = $("#section1"); var containerHeight = $(container).height(); var vpHeight = $(window).height(); // Init controller var SVGcontroller_journey = new ScrollMagic.Controller(); // Build tween var tween_journey = new TimelineMax().add( TweenMax.to($journey1, 1, { strokeDashoffset: 0, ease: Linear.easeNone }) ); // Build scene var scene = new ScrollMagic.Scene({ triggerElement: container, duration: containerHeight - vpHeight / 2, tweenChanges: true }) .setTween(tween_journey) .addIndicators({ name: "Draw Journey Lines#1", colorTrigger: "brown", colorStart: "brown", colorEnd: "brown", indent: 600 }) .addTo(SVGcontroller_journey); It works perfectly fine, but as you can see, I have three individual paths inside my SVG ($journey1, $journey1_2 & $journey1_3), and the ScrollMagic scene currently only draws one of them, $journey1, because I was only able to add that one to the TimelineMax(). My simple question: How do I add the other paths so they are drawn at the same time as $journey1? I was able to add the other paths, but they are being drawn consecutively: // Build tween var tween_journey = new TimelineMax() .add( TweenMax.to($journey1, 1, { strokeDashoffset: 0, ease: Linear.easeNone }) ) .add( TweenMax.to($journey1_2, 1, { strokeDashoffset: 0, ease: Linear.easeNone }) ); I appreciate any help with this. Thanks.
  3. Hello, I am trying to implement the smooth scroll when user click on the anchor tag then it will scroll and reach the target. it's working perfectly with all the anchor tag. Now my issue is, I have two tabs called as part1 and part2. There is no data in part1 but I have 3-4 anchor tags in the part2. I have to set a smooth scroll for that. I don't want a smooth scroll when the user clicks on part1 or part2. <div class="tabs"> <ul class="tab_click"> <li class="current"><a href="#part1" >Part1</a></li> <li><a href="#part2">part2</a></li> </ul> </div> I need a smoth scroll when user click on the below anchor tag. <ul> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> <li><a href="terms.php">Terms</a></li> </ul> Would you help me out in this issue?
  4. Hi all! I'm working on finding the "best way" to approach animating the width of an object using the current implementation of GSAP TimelineMax paired with ScrollMagic: https://gist.github.com/jodriscoll/bda71b0245776294779cc1f9573186cd As most of you may know, animating the width of an element does not leverage the GPU, causing a reflow of the DOM, which is bad for performance, can break with bad JavaScript, reduces the 60hz/fps target, etc., etc. Unfortunately, I noticed the way the TimelineMax animates an object's property is through transform: matrix3d(). Which in turn, prevents the explicit usage/designation of transform: scaleX() to alter the width to/from through the TimelineMax().to properties. A summarized snippet of where I'm managing this configuration can be seen below: // ... const ScrollLines = new TimelineMax() .to( animate.down, 1, { x: animate.neg, y: animate.pos, width: 0, repeat: 1.25, ease: Sine.easeOut, yoyoEase: true }, "together" ) .to( animate.up, 1, { x: animate.pos, y: animate.neg, width: 0, repeat: 1.25, ease: Sine.easeOut, yoyoEase: true }, "together"); // ... Actual question: Is there a way to alter the width of an element while still utilizing the core matrix3d calculation in TimelineMax? You can see the current implementation of this animation on youcanwa.org, or view the demonstration here. Any suggestions or help would be much appreciated!
  5. Hey guys, all day I've been trying to find a solution to the animation choppiness on retina display (most noticeable in Chrome, though present also in Safari/FF...) - when I move the window from MB Pro 13" display to my external 24" screen (1920x1200), it's all smooth... ? I know that transforms of full-screen images ain't ideal, but they're compressed to about 200kB each (1920px by 1920px) - besides that, even when I use smaller images (720px, about 50kB), the problem persists. I've tried swapping the divs with background-images for regular imgs, but no luck there... Also I've rearranged the timeline to eliminate as much simultaneous tweens as possible... CSSPlugin.defaultForce3D = false didn't help either whereas turning it on (true) seemed to help a tiny bit, as well as disabling the easing by TweenMax.defaultEase = Linear.easeNone. The thing is I came across several posts regarding the "retina issue" but no solution unfortunately. Video demonstration here: https://youtu.be/HieVenfcsWI (screen recorder makes it worse than it actually is - non-retina is 100% smooth, retina is a bit smoother) Code here: http://ideup.cz/krouzek2 (there is nothing else but ScrollMagic with GSAP) Any ideas would be really appreciated Thanks a lot!
  6. Hello. Thanks as always for the awesome product! This problem is driving me nuts, and i know this includes Scrollmagic, but can you just tell me WHY this doesn't work? I'm sure you've seen it before and maybe have a simple answer. WHAT IS SUPPOSED TO HAPPEN My svg animation is supposed to play on init, then when i scroll up, the animation reverses, and when I scroll back down, it plays again. Here's a pen of just the animation and some play and reverse buttons that is working as it should without scrollmagic. THE PROBLEM Once I define the reverse tween for scrollmagic (even using pause:true) it shows the svg statically on init, it won't play. Here's my pen that just won't work: Can you please show me how I can play this animation and still use scrollmagic? Any insight you have will be greatly appreciated!
  7. Hello, I am using Greensock animation for smooth scroll clicking on the menu. I have three pages which are `menu.php, index.php, terms.php`. Now I am on `index.php` page and there is no issue with scrolling if I clicking on the menu then it's targeting the right id. No issue on the index page. Now I am on `terms.php` page from there If I click on the about menu then it's not redirecting on the id. I am getting the URL like `http://localhost/test-menu/terms.php#contact` URL should be displayed `http://localhost/test-menu/index.php#contact` Hope you all understand my issue. Would you help me out in this? In the `menu.php` page, I added my menu code which is <ul> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> <li><a href="terms.php">Terms</a></li> </ul> In the `index.php`, I added the code which is <?php include('menu.php'); ?> <section id="about"> <h2>About</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <section id="services"> <h2>Service</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <section id="contact"> <h2>Contact</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.0/TweenMax.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/gsap/2.0.0/plugins/ScrollToPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script> In the `terms.php`, I added the code <?php include('menu.php'); ?> <section> <h2>terms</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </section> GSAP smooth scroll script /** Smooth Scrolling Functionality **/ $(document).ready(function() { // Init controller var controller = new ScrollMagic.Controller(); // Change behavior of controller // to animate scroll instead of jump controller.scrollTo(function(target) { TweenMax.to(window, 2, { scrollTo : { y : target-65, // scroll position of the target along y axis autoKill : true, // allows user to kill scroll action smoothly }, ease : Cubic.easeInOut }); }); // Bind scroll to anchor links $(document).on("click", "a[href^=#]", function(e) { var id = $(this).attr("href"); if($(id).length > 0) { e.preventDefault(); // trigger scroll controller.scrollTo(id); // If supported by the browser we can also update the URL if (window.history && window.history.pushState) { history.pushState("", document.title, id); } }; }); }); **Css** ul{margin: 0;padding: 0;list-style: none;} ul li{display: inline-block;margin: 10px;} section{min-height: 500px;}
  8. Hello, I am trying to scroll the box. Like when user scroll the page from the top then my box will scroll bottom to top and if scroll the page from bottom to top the box will scroll from top to bottom. I know it's confusion so I am sharing you the reference website http://www.xn--entreprenrsgatan-uwb.se/ . In this website ( check out the image first http://prntscr.com/jqor17), You can check the black box, When you scroll from the top then that black box animate from bottom to top and if you scroll from bottom animate top to bottom on the same position. I don't have any idea how to achieve this using scroll magic. Would you help me out in this?
  9. Hello, I have a problem with my first ScrollMagic Animation. I would like to fade in the boxes on scrolling down. This works fine except for the first time. When I scroll down for the first time the values like opacity don't "tween", they switch directly from 0 to 1. After that I can scroll up- and down with a working animation. It's like some kind of setting is missing. Do you have an idea what exactly is missing? This is my codepen: Thanks, Becca
  10. jakub40

    Many setTween

    Hello i have question. How to setTween to many different elements?? var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({triggerElement: ".layer_grouop", duration: 550}) // animate color and top border in relation to scroll position .setTween(".layer_8", {top: "100px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_7", {top: "100px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_6", {top: "55px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_4", {top: "35px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_3", {top: "20px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_2", {top: "5px"}) // the tween durtion can be omitted and defaults to 1 .setTween(".layer_1", {top: "-100px"}) // the tween durtion can be omitted and defaults to 1 .addIndicators({name: "2 (duration: 400)"}) // add indicators (requires plugin) .addTo(controller);
  11. I have recently started working with an animator who uses After Effects and the Bodymovin plugin to create SVG animations for websites. Bodymovin exports the SVG file as a JSON file, which you then run in a div via a JavaScript command from the lottie.js, Lottie Web library. (Check out the links, or scroll down further in this post for more details.) My primary goal is to create a workflow that allows for rapid creation of custom SVG animations, and be able to control them fully with GreenSock and ScrollMagic. During my research and attempts to integrate them all I have wondered how much of these JS libraries are overlapping each other in toolkits and effectiveness. My knowledge of anything past design, UI/UX, and basic front end JavaScript starts to become limited. So I have to ask, is it possible to control the GreenSock + Lottie animation using ScrollMagic? And perhaps more importantly, should I be animating using this workflow at all? Current Progress: ------------------------------- If you're interested in seeing my initial journey to get all 3 integrated I have documented it below... (Unfortunately I don't have CodePen pro so I wasn't able to put this all together in a Pen for viewing, if it's something that becomes necessary I will go ahead and get CodePen pro and do so.) Research: Integrating TimelineMax, with Lottie Web, and Controlling w/ ScrollMagic I have recently started working with an animator who uses After Effects and the Bodymovin plugin to create SVG animations for websites. Bodymovin exports the SVG file as a JSON file, which you then run in a div via a JavaScript command from the lottie.js, Lottie Web library as you can see from the sample below. var select = function(s) { return document.querySelector(s); }, selectAll = function(s) { return document.querySelectorAll(s); }, animationWindow = select('#animationWindow'), animData = { container: animationWindow, renderer: 'svg', loop: true, autoplay: true, path: 'PATH.JSON' }, anim; var anim = lottie.loadAnimation(animData); A Singular Example of Controlling Lottie w/ GreenSock I have been looking high and low for documented of examples of people successfully integrating with GreenSock and Scroll Magic with very limited results. I have found one excellent video on YouTube of a dev by the name Chris Gannon (who I suspect may be a member of these forums) successfully controlling a Lottie animation through TimelineMax but that is about it. My Attempts to Recreate This, and Add ScrollMagic Control Have not gone very well... I believe that the current state of my code (mostly able to get this far thanks to the work of Chris Gannon) is missing some vital information on the Lottie animation itself. How many frames does the animation have? The relation of scroll position to frame selection. Pushing that data through to TimelineMax to effectively control animation. My goal being to control the animation with a Tween, Duration Tween, or a Reversed Tween. The code below is my hack-job trying to get this all working; i'm currently dealing with an error from this code "Uncaught ReferenceError: animationControl is not defined". jQuery(function($) { //Lottie animation Window and Data wrapper var select = function(s) { return document.querySelector(s); }, selectAll = function(s) { return document.querySelectorAll(s); }, animationWindow = select('#animationWindow'), animData = { container: animationWindow, renderer: 'svg', loop: true, autoplay: true, path: 'PATH.JSON' }, anim; //Lotie animation trigger var anim = lottie.loadAnimation(animData); anim.setSpeed(1); //TimelineMax Lottie animation control $('#animationWindow').each(function(){ var animationControl = new TimelineMax({}); animationControl.to({frame:0}, 4, { frame:anim.totalFrames-1, onUpdate:function(){ anim.goToAndStop(Math.round(this.target.frame), true) }, repeat: -1, yoyo: true, ease:Linear.easeNone }) }); //ScrollMagic Scene var controller = new ScrollMagic.Controller(); var icon_scene = new ScrollMagic.Scene({triggerElement: "#animationWindow_trigger", triggerHook: 'onEnter'}) .setTween(animationControl) .addTo(controller); }); And this is my current state of affairs. I will be updating this post as I move along, and eventually - hopefully come up with an elegant solution to this.
  12. Hello there, I'm new in Tweening... Does someone here know how to update Tween settings on window resizing when Tween progress is > 0 ??? I created an horizontal slider with ScrollMagic and Tweenmax and I tried to update dimensions and Tween settings on resize but even if I kill Tween, reset and refresh Scene it only works when Tween progress is 0... Thanks for your help ! Alex
  13. Hi there, can anyone help me please? I have a page with a div that has a fixed position. I'd like to animate the element inside the div with GSAP when you scroll through the sections on the page with ScrollMagic. I am able to make the object move when you enter a section and when you scroll back it is reversed. How can I make it so that the object moves from it's current position to a new position when the user scrolls into the next section? I'd like the element to keep changing position when you enter a different section. I've seen many examples of GSAP and Scrollmagic in action but I'm struggling to find any examples that animate a single element through. A simple Codepen example is attached. Thanks.
  14. Hi guys, I'm struggling to get scroll magic & multiple timelines to work together. The first timeline plays but the other 2 seem to start out of view. Checked this against a few examples and it looks pretty much the same but all I can find are tween examples. If anyone can see the problem here that would be fantastic. Cheers, Smallio
  15. Hello! I'm pretty new and still learning GSAP, which is pretty awesome and powerful. I've been working on a horizontal website so as you scroll, animations are being triggered based on the scrolling position. I've combined GSAP with Scroll Magic to achieve this. You can see the site here - http://maric.launchcatapult.com/ I have 5 main sections Home, WePartner, WeAdvise, WeServe, and WeEmpower. I've created a cross over transition, which you can see towards the end and after all of the animation is completed of the "We Partner" section. During this cross over transition animation, how can I make the timeline jump to the very start of the next section, which would be the "We Advise" section then continue on its animation from there? Another example that I've been looking at is from http://tram-house.com/. After you insert the key into the hole, they have that circular transition, then after that animation is complete it takes you to the beginning of the next section (also provided screen shots). Can any one direct me onto the right path to achieving this same thing? I know the tram-house.com site is using a canvas instead, but I know little to none about how to animate and draw shapes within canvas. That's why I'm just tweening svg shapes instead. Thanks!
  16. 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()
  17. I'm new to GSAP. Can anyone help me figure out why my animation is running before it's triggered by ScrollMagic?
  18. I want to replicate an iOS Safari like rubber-band effect, when you overscroll pages or apps. I just can't get the easings / ScrollMagic settings right.. This thing needs some physics!
  19. 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!
  20. 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?
  21. 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); });
  22. 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.
  23. 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/
  24. 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
  25. 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!
×