Search the Community

Showing results for tags 'scrollmagic'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


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

Found 121 results

  1. 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?
  2. 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!
  3. 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!
  4. janCapricorn

    Smooth page scrolling with TweenMax

    Hi Guys, I stumbled on this post http://bassta.bg/2013/05/smooth-page-scrolling-with-tweenmax/ and implement the script there but not the result i wanted. Here is the script that $(function(){ var $window = $(window); //Window object var scrollTime = 0.3; //Scroll time var scrollDistance = 50; //Distance. Use smaller value for shorter scroll and greater value for longer scroll $window.on("mousewheel DOMMouseScroll", function(event){ event.preventDefault(); var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3; var scrollTop = $window.scrollTop(); var finalScroll = scrollTop - parseInt(delta*scrollDistance); TweenMax.to($window, scrollTime, { scrollTo : { y: finalScroll, autoKill:true }, ease: Power1.easeOut, //For more easing functions see http://api.greensock.com/js/com/greensock/easing/package-detail.html autoKill: true, overwrite: 5 }); }); How to achieve something like this smooth page scroll on this page - https://www.shift-capital.com/about? Please help.
  5. 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!
  6. 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;}
  7. hybreeder

    How to scroll the div on scroll

    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?
  8. Noturnoo

    gsap.Animation/ScrollMagic + Vue- CLI

    Hello GSAP'ers I'm using Vue-Cli / Webpack template and I already managed to import ScrollMagic, but when running TimelineMax with setTween I get this error: "(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js" My webpack.base.config.js is configured like this: var $ = require("jquery"); var ScrollMagic = require("scrollmagic"); var ScrollGsap = require('scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap'); var gsap = require("gsap"); module.exports = { ... resolve: { extensions: ['.js', '.vue', '.json'], alias: { "TweenLite": Path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'), "TweenMax": Path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'), "TimelineLite": Path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'), "TimelineMax": Path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'), "ScrollMagic": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'), "animation.gsap": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'), "debug.addIndicators": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js') } And my Component.vue is like this: <script> import { TweenMax, TimelineMax } from 'gsap' import $ from 'jquery' import ScrollMagic from 'scrollmagic' import gsap from 'scrollmagic' export default { mounted () { TweenMax.from('#red', 5, {width: 0}); const tlVueGsap = new TimelineMax() .from('#blue', 5, {width: 0}) .to('#blue', 5, {x: 400}) const controller = new ScrollMagic.Controller(); const scene = new ScrollMagic.Scene({ triggerElement: "#red" }) .setTween(tlVueGsap) .addTo(controller); } //Close Mounted } //Close Export Defautl </script> ScrollMagic is working, just the gsap.animation plugin that is not being imported Any idea how to solve it? Link of Github Project: https://github.com/Efetivos/vue_init/blob/master/src/components/GsapTest.vue Thanks Folk
  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. alexandrebuffet

    How to update a Tween on window resizing

    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. heavylifting

    Controlling the speed of Tween on scroll

    I have the following: var secOne = new ScrollMagic.Scene({ triggerElement: '.section-a', triggerHook: 0, duration: $(window).height() - 100 }) .setTween( new TimelineMax() .add( TweenMax.fromTo(['.section-a .svg-a'], 0.5, { autoAlpha: 0 }, { autoAlpha: 1, force3D: false, ease:Power4.easeNone }) ) .add( TweenMax.fromTo(['.section-a .text-a'], 0.5, { autoAlpha: 0 }, { autoAlpha: 1, ease:Power4.easeNone } ) ) ) .setPin('.section-a') .addTo(controller); Which is fine apart from the fact that the animations have to come in smooth no matter how fast the user scrolling up or down. In this case if the user scrolls to fast then the animated parts suddenly show up. Is there a way to slow down the tween so that no matter if the user scrolling really fast they'll always get a smooth in out response from the animated tween? As you can see I have tried 'ease:Power4.easeNone' and that works to a degree but there's really nothing that stops it from zooming in on a fast scroll movement. Also I know scroll jacking is the work of Beelzebub but I'm being forced into this against better reasoning. Thanks
  14. 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.
  15. smallio

    Scroll Magic - Multiple Timelines

    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
  16. Kingsley88

    ScrollTo Plugin and ScrollMagic

    Good day lads. I have a pressing question and I am hoping this is the right place to ask. Can anyone direct me on the general approach towards achieving scrolling like these on the following sites - http://fantasy.co/ and https://www.ramotion.com/. Generally what I want to know is how to listen for the onScroll event and scroll to an anchor or an element on the page such as can be seen from those sites. I've tried searching online but all the tutorials seem to be doing this on click of an anchor link whereas I want to achieve this on scroll. Anyone able to help?
  17. launchcatapult

    Jump to Next Section

    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!
  18. Hello great almighty GSAP forum, here I am with another question I'm having. Goal create some sort of traveling trail emitter that follows the object and being manipulated by scroll event. Also everything is responsive, relative to the SVG size.Progress/ attempts Got most parts working, however there're a few visual things I just can't figure out. I've tried manipulating x,yPercent, transformOrigin, svgOrigin on the <image> tag inside the <svg> Help needed I'd like to know how to make the image's transform origin to the tip or tail of the arrow how to properly adjust the emit position so it sync with the arrow tail.. Actual travelling route doesn't have to follow the predefined path strictly, it's more important getting the emitter right. I don't know how autoRotate works under the hood, by the look of the relationship between particle and the arrow position, seems like a "invisible bounding box" is created, and the arrow rotate inside the box, and the box takes on the bezier curve data. Question outside of this topic Why isn't <image> tag visible on Safari, let alone IE?? The emitted particle shows on Safari but seems the percentage position is way off? Seems like line 48-51 behave differently on Safari. Added on 19th of April To answer my own question for peoples reference. <image> tag needs an inline width and height attribute in browsers other than Chrome, somehow other browser can't take the CSS and apply it to <image> tag within svg; Thanks a lot!
  19. 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!
  20. WilliamBay

    SVG Masks in a Loop

    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()
  21. 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?
  22. I'm new to GSAP. Can anyone help me figure out why my animation is running before it's triggered by ScrollMagic?
  23. francescocortese

    Scroll animation translate3d without 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!
  24. 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); });
  25. Kingsley88

    ScrollMagic Effect With GSAP

    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.