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. In the given code, I'm attempting to create two synchronized animations using ScrollMagic. The first animation involves a video whose playback is controlled by scrolling, while the second animation is a text that flies in at a specific point in the video. To achieve this, I've used TweenMax and ScrollMagic, setting an offset value for the text animation to ensure it starts at the right moment. The issue I'm encountering is that on larger screens, the text animation comes in later than expected. I initially considered using the `triggerHook` value between 0 and 1 to address this problem, but it didn't provide the desired results. How can I make the offset value for the text animation dynamic, so that it starts at the right time, especially on larger screens? let scene = new ScrollMagic.Scene({ duration: 19000, triggerElement: intro, //video triggerHook: 0, }) .addIndicators() .setPin(intro) .addTo(controller); const height = window.innerHeight; const textAnim = TweenMax.fromTo(text1, 3, { y: 0 }, { y: -1.5 * height }); let scene2 = new ScrollMagic.Scene({ duration: 3000, triggerElement: intro, triggerHook: 0, }) .setTween(textAnim) .addTo(controller); // Calculate the offset based on scene's duration let scene3Offset = scene.duration() * 0.315 - 1000; // 31.57% of scene's duration const textAnim2 = TweenMax.fromTo( text2, 4, { y: height }, { y: -1.5 * height } ); let scene3 = new ScrollMagic.Scene({ duration: 3000, triggerElement: intro, triggerHook: 0, offset: scene3Offset, }) .setTween(textAnim2) .addTo(controller);
  2. Hello, I'm new to GSAP, so apologies if this is not the right place to ask! I'm not exactly sure where my issue lies (if this is GSAP or the ScrollMagic library). I have a path that I am trying to animate on scroll (recreating this effect). I am able to recreate this up to the point of scrolling back up. When I scroll back up, the path mostly disappears, but a single dot is left behind. This behavior seems inconsistent - I have two examples of paths in the codepen where a dot is left behind only in the second path. To recreate my bug, scroll down, wait a second, then scroll back up. I generated these paths by drawing a path in Inkscape, then copying the d="..." value from the generated svg. More often than not, I get a path that leaves a dot behind. But the only difference between the two paths in the codepen is that I translated and scaled one of them. Thank you!
  3. Hello everyone, I need your help to code this scroll logic : change one pinning element allowed active state by scroll. When I scroll, state changes and updates image in both sides allowed. By details, when I scroll down, the element below will be active and drag to change the corresponding image to the right, otherwise when scrolling up, the upper element will be active and drag to change the image, when clicked on any element on the left, the image will also be changed according to the active element (similar to scroll), and if the first element is active, we will be able to scroll to the top of this section. This is sample link : Ngân hàng di động MyVIB 2.0| VIB I want to use scrollmagic or maybe gsap or intersection observer, thank you.
  4. Chronic

    Circular menu

    Hi, I've been trying to make a menu like this: https://maxilla.jp/ where the menu is a carousel and moves when you scroll, drag, or click. I'm guessing I have to use scrollmagic for the scrolling part, but I'm kind of lost. I just want to be able to scroll and the next item follows in sort of a circular path, like a carousel without arrows. I'm not expecting any of you to tell me the answer. I'd be more than happy if you just simply point me in the right direction. Thank you all for your time!
  5. Hi! I'm new at ScrollTrigger (about 4 days). I have a simple question: is ScrollMagic and ScrollTrigger same?
  6. Hi! How can I setPin() use this method in ScrollTrigger. My purpose is so: the scroll must be stop till the animation end. Is it possible in ScrollTrigger? Thanks!
  7. Hello to all. Maybe someone has time to review and correct the script - https://codepen.io/tester_info/pen/JjNJLNV Here is a small problem, it’s incorrect scrolling and changing the directions of the scrolling (from horizontal scrolling to vertical one and vice versa). There are two problems: 1. There is a bug in the scrolling (as I understand it’s because of the vertical block takes height, such as in horizontal). 2. The last section of the "contact block" cannot be scrolled to its full width Maybe we can work differently to perform this task with mix (horizontal/vertical) scrolling sections?
  8. Hi Experts!! First of all thanks to GSAP and all here experts who are doing tremendous job, helps to beginners and those who stuck in code like me :), I have just start development on ScrollMagic and GSAP , I have two questions: 1. I want to auto scroll on scroll down or scroll up, for example if I am at first scene, when I scroll down, it should be go to the second scene and stop, similar behavior from scene 2 to scene 3. but in my code it is not autoscroll. I want this on mobile and desktop both but didn't get success. 2. When ever scroll down on mobile, the browser address bar auto hide, that push scene on top. Thank you in advance!
  9. Hi! Not sure if this is the best place to ask help regarding this, but this forum was very helpful to get me started with gsap and scrollmagic. I'm currently working on a horizontal scrolling website with ScrollMagic and GSAP. I've stumbled upon several examples and it's working well on desktops with mousewheel function. However, when it comes to tablets where mousewheel is not applicable, the anchor navigations don't work and the results when using Chrome and Safari varies (anchor links not working on ipad chrome but works well on ipad safari). I added a drag function which is helpful for tablets, but it staggers and the animation is not very smooth. Below is the mousewheel function I used: document.addEventListener('wheel', function(e){ if(e.type != 'wheel'){ return; } let delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 1) || 1; document.documentElement.scrollLeft += delta; document.body.scrollLeft += delta; }); And here is the drag function where I based from https://codepen.io/thenutz/pen/VwYeYEE const slider = document.querySelector('html'); let isDown = false; let startX; let scrollLeft; slider.addEventListener('mousedown', (e) => { isDown = true; slider.classList.add('active'); startX = e.pageX - slider.offsetLeft; scrollLeft = slider.scrollLeft; }); slider.addEventListener('mouseleave', () => { isDown = false; slider.classList.remove('active'); }); slider.addEventListener('mouseup', () => { isDown = false; slider.classList.remove('active'); }); slider.addEventListener('mousemove', (e) => { if(!isDown) return; e.preventDefault(); const x = e.pageX - slider.offsetLeft; const walk = (x - startX) * 3; slider.scrollLeft = scrollLeft - walk; //console.log(walk); }); Unfortunately, with recent ipad update, it seems not possible to detect if the user is using an ipad or ipad pro. Is there something wrong with the code or possibly css that can fix this? Appreciate any help!
  10. So i've tried using my animation component more than once on a page. But its only works on one element. It doesn't animate on duplicate elements I've tried methods from Petr https://www.youtube.com/watch?v=NA9SIQnzRQc & https://www.youtube.com/watch?v=c85GjM7vy5A&t=198s One of Petr's methods works great for adding a classes to multiple elements, but i cant get it working with a gsap timeline. This is my code, i left out all the gsap code animating my feathers. Now remember this animation is working perfectly on one div. Its just when i try duplicate the timeline on other divs, it only plays on one div not all of them. // create tween var timeline = new TimelineMax( {repeatDelay:0, repeat:-1} ) .add(tween1, 0) .add(tween2, 2.1) .add(tween3, 4) .add(tween4, 6.5) timeline.timeScale(1.2) // 1 default $('.feather_container_home, .feather_container').each(function(){ // build scene var scenefeather1 = new ScrollMagic.Scene({ triggerElement: this.children[0], triggerHook: '1', offset: 200, reverse: false}) .setTween(timeline) // .addIndicators( {name: "feathers"} ) .addTo(controller) }); Would be great if someone has a solution or had trouble with this before. thanks!
  11. Hi folks, I've been using scrollmagic for my scroll based animations. And I've just started to learn GSAP ScrollTrigger. With Scrollmagic, I've achieved a scroll animation as seen below. It has 3 sections with repeated elements - a title, paragraph and a image for each section. I've used two separate timelines for scroll in and scroll out actions. I'd love to learn, how this exact same animation is done in with scrollTrigger? Is there a easy way to do this using ScrollTrigger? Thanks GSAP team for ScrollTrigger and the great support to this community.
  12. Hi there, I'm new to animating using Gsap and I'm planning to integrate it to Nextjs together with Scrollmagic, however, I'm unsure of how to do it. I keep getting error when trying to use tween staggerFrom property. It keeps saying it doesn't exist. If anyone have experience the same issue as me and manage to find a fix, do let me know in the comments. Thank you. Edit: I managed to figure out how to do it. Thank you all for your help
  13. Hey, I should tell u guys I'm very basic at javascript let alone Jquery. I ve been experimenting with scrollmagic and gsap, but now i'm stuck and could use your help please. I want to achieve the following: When u scroll into section 2, there should start a picture slideshow on section 3. I want it to keep running until section 3 reaches the top and on scrolling then the slideshow should plit into two specific pictures that in turn go left and right, while the section is pinned. It all looks kinda ok( dunno about the code: I try to keep it as simple as possible so i really understand it:)). The only problem is the slideshow itself...i couldnt keep it looping without having somekind of delay when it finishes the first time and restarts. Then i tried reversing it, but that also gives a delay.How can i fix this? Also if u scroll really fast from top to section 3 the pictures arent loaded yet and then the left right split animation is messed up. Im guessing i could fix this by letting the animation start earlier( on pageload), but I wonder if theres another solution. (Seems weird running an animation in background while nobodys on that section) Sonny
  14. Hello, I am pretty new to GSAP and trying to achieve an effect that might not be possible. I am trying to get a parallax slider to pin when you start scrolling so the parallax layers will show. I would like it so that the images show up as in the .gif and start to display when you scroll. After that you continue to the normal content. I have searched all over the internet but I cannot find a good example or a piece of code that achieves this. ScrollMagic is supposed to be able to handle this but every time I try to apply it the parallax slider gets messed up. Probably I am approaching this in the wrong way and if someone could point me into the right direction that would be very appreciated. The Codepen url directs you to the parallax slider that I have been using as an example. Greetings, Mark
  15. Hey everyone! New Club Greensock member here I'm loving GSAP so far! Hats off to the Greensock team for creating this wonderful tool. Basically, I'm just trying to get React to compile after importing 'animation.gsap'. I haven't included a Codepen, as the app and ScrollMagic work -- but I can't get the right behaviour due to this animation.gsap issue. That said, do let me know if you want a Codepen up regardless. I installed ScrollMagic via NPM. I'm aware this issue was brought up before, but none of the solutions I could find have worked out for me :(. At the moment, I'm testing out scaling down my h2 header to half its size upon scroll to the section. Thanks in advance! UPDATE: I've loaded GSAP, ScrollMagic, and animation.gsap.js via CDN. While the former two are communicating, animation.gsap.js isn't. Apparently, it might be due to "setTween( )"? What would be the alternative to "setTween()"? From ScrollMagic Troubleshooting Docs 2.2 Make sure it's a ScrollMagic issue and not related to your animation framework. Many animation-related issues are caused by an animation framework (GSAP/Velocity) or a misuse thereof. A very common mistake for example, is that the selector for TweenMax turns up empty. For GSAP the recommended best practice is to create your tweens, but refrain from adding them to the ScrollMagic scene object using setTween. This ensures that ScrollMagic doesn't manipulate the animations in any way. If you have a look at your site now, you can check if the animations plays out the way you wanted to. If they don't, the problem is obviously not rooted in ScrollMagic. ///////////// ERROR Failed to compile ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js Module not found: Can't resolve 'TimelineMax' in '/Users/mabbs/Desktop/WebDevelopment/port-site2/node_modules/scrollmagic/scrollmagic/uncompressed/plugins' CODE import React, {Component} from 'react' import 'gsap'; import ScrollMagic from 'scrollmagic'; import '../../../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'; export default class Projects extends Component { constructor(props){ super(props) this.controller = new ScrollMagic.Controller(); } componentDidMount(){ new ScrollMagic.Scene({ triggerElement: "#scrollStarts", duration: 400, offset: 200 }) .setTween('#main-content', { scale: 0.5 }) .setPin("#latest") .addTo(this.controller) } render(){ return( <section className="projects-section" id="projects"> <div id="scrollStarts"> ------ Test ------- </div> <div className="inner-wrapper" id="main-content"> <h2 id="latest">My Latest Work.</h2> </div> </section> ) } }
  16. I'm trying to use gsap in combination with ScrollMagic. To do so I created a timeline, but this returns an error for setTween(tween): Anyways, after importing: import "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap"; I get the following error: import {gsap} from "gsap"; import ScrollMagic from "scrollmagic"; export const initPhoneScroll = () => { const tween = gsap.timeline() .to(".phone-left", 1, { x: -350 }) .to(".phone-right", 1, { x: 350 }); const controller = new ScrollMagic.Controller(); const scene = new ScrollMagic.Scene({ triggerElement: ".phone-image__wrapper", duration: "100%" }) .setTween(tween) .addTo(controller); }; How do I use gsap in combination with ScrollMagic correctly, since TweenMax, TweenLite, TimelineLite, and TimelineMax have all been consolidated?
  17. I'm just not sure if I still need Scrollmagic, as I haven't used GSAP in a really long time, and it seems (at least by looking) that you don't need SM to have simple .from() animations that say fade in a div from the left and from opacity 0 to 1 (like on the homepage elements as you scroll down). I'm setting up my dependencies, and just want to wrap my head around how to do it currently. Thanks in advance, and I apologize for my ignorance!
  18. I'm very new to GSAP - just playing around with it alongside ScrollMagic - working great so far, enjoying seeing what it can do. I'm wondering if anyone could advise on the best method of 'drawing a line' with a PNG graphic (along an SVG path, if possible, as it needs to be responsive, and this seems to be the best route from what I've read) It's looking like the MorphSVGPlugin (possibly using .pathDataToBezier ?) or the DrawSVGPlugin may provide the answer. This is the effect I'm going for - the pencil element travels along the SVG path and reveals the line. This SVG path could be more complex that the one here! Apologies if this has been covered elsewhere - I did have a look through the forum, but couldn't find anything addressing this... any help much appreciated. Thanks in advance!
  19. 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
  20. Hello When i import scrollMagic files via npm , it gives me error and says: "Uncaught ReferenceError: TweenMax is not defined" , in Gsap2 I was importing TweenMax by hand and it helped, but in Gsap3 i don't know how to do it, can you help me? Thank you
  21. Hello, I've got a simple task: animate a scrolled-control bodymovin animation in a pinned window. This is my test webpage, the codepen is also provided. In a fullsize window where I don't have to use pinning, it works well. The problem is that I don't know how to get ride of this crazy jumping effect. PS I used code partially from these GSAP tutorials and from this OKAI tutorial.
  22. I've made a complex animation that works perfectly on desktop. Spent about 5 months learning gsap+sm and working on it, and with the help of this community finally got there. But, now that it's live, I discovered that it's absolutely horrible on mobile! For example, - some fixed elements that have fromTo animations, entering from outside the window erroneously appear when scrolled fast on mobile (but behave correctly when user's scroll speed slows) - or the animations that base their calculations on the 100vh miscalculate, because the mobile browser shows, but then hides the url bar and other menus (chrome on iphone) Any good answers / best practice resources that you guys can direct me to? Thanks! (Don't have a codepen example. It's live on my site, but don't know if pasting it here is frowned upon)
  23. Hi, I have created a gsap animation in my website. Inorder for it to autoplay i have not specified the duration while creating the scrollmagic scene. Now the animation is autoplaying (which is the intended effect if was going for) but now the section stays locked in place since there is no duration to tell the animation that it is over. So currently, the next elements are being overlapped by the pinned element. How can i fix this ? How can i unpin the element after the animation ?
  24. Hi GSAP folks! I'm brand new to animating anything on the web (aside from CSS3 animations or... ye olde Flash animations from 13 years ago), but I have a pretty solid mastery of front end dev techniques. I've made some good progress running through the forums here and elsewhere, and subscribed to the Creative Coding Club. Thanks for all the great resources! I'm working with GSAP 3, and ScrollMagic so far. I have a client that is looking to create a website that behaves like the one here: https://dpotferstudio.com/ They're looking to have the user "scroll", then the page scrolls to a new scene and plays the animation. I understand how to implement ScrollMagic, utilize setPin, setTween, etc., and setup a GSAP timeline, but i'm not sure how to implement the snap to scene THEN play the animation situation. Is this something that GSAP + SM can handle? Or with this require some additional custom JS outside the box? Thank you so much in advance for any help you can give me. I certainly appreciate it!
×
×
  • Create New...