Jump to content
Search Community

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
  • Supercharge

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


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 182 results

  1. Hello! I need the "absolute" element to become "fixed" when scrolling 120px. After the trigger, this element must again become "absolute". But, if you scroll in the opposite direction - up from the trigger, the element must again become "fixed" until it reaches its original position. There he must again become "absolute". In my project it works only in one direction - before the trigger. And nothing in codepenio works at all Help, please
  2. Hi, Please scroll down and then up, in CodePen Pin. When I start scrolling down, animation works perfectly. If I scroll up, animation works reverse but the box does not keep original size and position. How can I fix that? Thanks!
  3. Hey everyone, I have been reading this forum for a long time but this is my first post/question as i have come across a dilemma. Hope you're all doing well. I wanted to include my JS code in the codepen but it's a big crazy mess. As you guys can see in my codepen i have a section in the project I'm building which on large screens has 2 rows with 3 boxes in each row and on small screens 1 column with all boxes stacked on top of each other. What i want to accomplish is really simple, i just want each box to fade in from the bottom-up as it comes in view. The reason I say each box is because my priority is more on the small screens with 1 column, I'm willing to compromise for large screens and what i mean by compromise is that i don't mind if the whole row animates together as it comes in view and then followed by the next row. I kind of achieved this in a very unusual way with code that is terribly wrong, and i looked at plenty of scrollmagic and GSAP examples including in this forum but i didn't come across any solutions. I would really appreciate any help in how i can achieve this. Thank you.
  4. Hi Guys, I just discovered GSAP few hours ago, and I'm trying to learn how to do cool stuff with it. Unfortunately I've chose something way out of my reach as a first task. The other day I've found a blog, with a pretty amazing effect while scrolling. And it amazed me so much that I've decided to start learning GSAP. I've found out that it might be possible to re-create this effect with GSAP + MagicScroll. I've tried few things but none's working neither close this This is a Pen, with what I'm trying currently: https://codepen.io/anon/pen/jowXzy I've redone something similar with CSS animation: https://codepen.io/anon/pen/xNrmJa but obviously it's not responsive when scrolling etc. I couldn't found what's the GSAP version of css rotate3d() As you can see I've tried: rotationX rotationY rotationZ but it's not working as css rotated3d() I'd appreciate some help from you guys! Thank you very much for your time Here's what I'm trying to achieve:
  5. I have some problems with scroll magic goes horizontal example. I have part of my portfolio website which I have some accordion images and I want them to expand to their 100% width as the people scroll the page. not by hovering. like what norgram.co is doing more or less but I just want it on my images. so I started to use the go horizontal structure of the magic Scroll and nothing is working and I don't know why. https://codepen.io/nargess-shabani/pen/oRvjGr#code-area help me, please. I am stuck.
  6. senna

    Section slides

    Hello, I'm working on a schoolproject and I would like to use something like this: http://scrollmagic.io/examples/advanced/section_slides_manual.html I made this code, but it's acting weird. http://codepen.io/codesen/pen/bwogPj Want I want: when you scroll, one page moves to te left and the next page comes in to the screen with a little scaling. I used a timeline for this. What is happing: when you scroll all page are thrown on top of each other, the backgroundcolors disappear and everything moves to the left. Not really what I was expecting. I hope you can tell me why this is happening!
  7. Hi GSAPpers! First post in the forum... I code mainly html and css (and some -little- jQuery) and now I'm learning GSAP and "modern" vanilla JS since two week ago. Today I'm testing GSAP combined with Scrollmagic. I'm trying to apply the same scene (a simple TweenMax with a fade in from the bottom) to all the elements of the page with the class "fadeInBottom". I can do it with this jQuery: let controller = new ScrollMagic.Controller(); $('.fadeInBottom').each(function () { // build a tween let fadeInBottom = TweenMax.from($(this), 1, { y: 100, opacity: 0 }); // build a scene let scene = new ScrollMagic.Scene({ triggerElement: this, offset: -200, reverse: false }) .setTween(fadeInBottom) .addTo(controller) }); Now i'm trying to do the same in plain vanilla JS: let controller = new ScrollMagic.Controller(); // FadeInBottom let fadeElem = Array.prototype.slice.call(document.querySelectorAll(".fadeInBottom")); let self = this; fadeElem.forEach(function(self) { // build a tween let fadeInBottom = TweenMax.from(self, 1.5, { y: 100, opacity: 0 }); // build a scene let scene = new ScrollMagic.Scene({ triggerElement: self, offset: -200, reverse: false }) .setTween(fadeInBottom) .addTo(controller) }) But it just doesn't work. And the console says Uncaught ReferenceError: controller is not defined at index.html: ".addTo(controller)" at Array.forEach (<anonymous>) at index.html:861 "fadeElem.forEach(function(self) {" Any help would be appreciated. Thank you!
  8. I have a similar problem and I do not know what can help you, and I can not make it work in codepen either Thank you
  9. You can see from my codepen that I have a logo on my website that fades out as you scroll down the page. I only want to do this on mobile and mobile screen sizes. I'm using scrollmagic with this also. Does anyone know how to set this up so the effect will only work on mobile and screen sizes < 768px. I'm fairly new to JS and so would appreciate baby steps. thanks
  10. Hi guys, I'm trying to do a fadein and fadeout effect on pinned sections using scrollmagic and gsap. However, i seem only to be able to do either a fadein effect or a fadeout effect only, what im trying to achieve is fading in and fading out as im scrolling and having the text still pinned while both effects applied. Here is a fiddle of what im having right now. Any help is very very much appreciated. NOTE: from the fiddle it might look like i can already achieve a fadein / fadeout effect from the 2nd section to 3rd section, where ACTUALLY the 3rd section just has a fadein effect.
  11. Hi GSAP community! A huge thank you because thanks to you we can do something beautiful! For the needs of my future company that I am develloper I need to do a scroll action like this example> https://codepen.io/GreenSock/pen/GopRwQ I get there very well except that I wish 1. Have my line continue in draw svg until the end (scene with scrollmagic) 2. Stop the blue circle at a certain position while element 1 continues to end. (scene with scrollmagic too) I can not stop my tween blue... Can you help me ? thank you in advance
  12. Hi everyone, So I'm looking at making an interactive timeline of famous people in history and there will be hundreds of people with associated data. I'm using react (gatsby specifically). I want to be able to map through the data object and render about 10 people at a time on this pathway, and it looks like they are at the back of the path. Then, when the user scrolls down say, the people move forward towards the user, on the timeline. Then when they get to the front of the timeline they fade away. In the meantime more people have appeared behind them as they move forward. What I think is a size animation, so they get bigger based on trigger points on the screen. But what the heck do I know?? Theres so much info out there I'm bamboozled. So what do you think - scrollmagic? gsap? Where do I even start yo?! Advice please!!!
  13. I'm trying to accomplish something and I'm not sure how to approach it or what direction I should go in. I am using Scrollmagic, however, I think this pertains more to fromTo()'s position attribute and timing. I have an animation where I want background images sliding up on one half and sliding down on the other half. I have achieved this. The second part is I want overlayed text fading in and out while the scrolling is occurring, too. Scrollmagic binds to the "duration" attribute, so 1 = the duration of the pinned scrolled element. The timing I have for that background images is what I had desired. I have the position attribute set to 0 so they fire simultaneously. What I don't understand is how to set up a separate, independent timeline to the same pinned element for the overlaying text to fade in and out. The duration attribute is overridden because of Scrollmagic, so what can I do? Should I try to chain together TimelineMax() tweens? Should I create 2 pinned elements and overlay them on top of one another? You can see my codePen and see I am almost there, but I feel like I am not fully grasping how the the pinned elements work with Scrollmagic or how to chain together the tweens. I have experimented with a lot of variations but my understanding is limited. Any help is greatly appreciated.
  14. Hi guys, I'm trying to animate this svg to give the effect as it lifted off the background. In this pen I tried to animate the scale and the drop shadow and the animation is triggered with scrollmagic. I have set the initial drop shadow in the CSS as advised by Dipscom here but the drop shadow doesn't animate. What am I doing wrong? If this effect can't be achieved this way is there another way to approach it? thank you
  15. Hi Guys, I've built a quick codepen for reference but basically as you scroll down the page text fades in and also the background ( bigger text) image fades in. I've somewhat got it working but I need the active class to be removed on the background image when the next one fades in. At the minute the all just stack. Thanks
  16. Hi guys, So I've only done pretty basic stuff with GSAP at the minute but i've been set the task of building something similar to menu section on this link. http://www.johos.at The scroll timeline thing with changing background / text I just want to know if it's possible to build something similar using Scroll Magic and GSAP? I don't fancy investing a couple of days trying to do it to find out it's not possible.
  17. Hi Guys, I have 4 fullscreen sections on a page (using fullpage.js). I'm trying to animate the background gradient of the body every time users scroll through each section. Animation duration should be tied to the scrollbar position. I have pre-set colors to use for each section that I have put into an array. My idea is to get the id of the section currently in view and pass this into the colorize function to get the corresponding colors for the gradient. I'm stuck here. Thanks in advance
  18. I have in the attached codepen a very simple animation, where I want the '.delivery' box to appear when the trigger is initiated. Not as soon as the page loads, which is what currently happens. Thanks for any help.
  19. Hi there, I got a weird issue. Somehow, my SVG path is appearing outside the SVG scope. Could be my messy javascript (if anyone has tips on how to do it cleaner, please). The SVG in the yellow box should be right in the center. Anyone know how to fix this? Thanks!
  20. 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
  21. 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.
  22. 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?
  23. 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!
  24. 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!
  25. 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!
×
×
  • Create New...