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

  1. 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/vertica
  2. 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. Wh
  3. Hi there, I'm wondering if there is a solution to emulate a fixed background with GS ? I have created 2 versions of the same site. One uses background fixed with a swipe parallax effect here http://fressko.webflow.io/ the other uses gs to tween the slides in and out of opacity as seen here http://freshko.webflow.io/ all of this is done via scroll magic and it's ability to pin. QUESTION - is there ANY way to recreate the swipe / scrolling fixed background effect from http://fressko.webflow.io/ so I can use it on http://freshko.webflow.io/
  4. 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 hel
  5. GreenSock

    ScrollTrigger

    Scroll-driven animations re-invented Animate anything on scroll DOM, CSS, SVG, WebGL, Canvas, whatever. Toggle playback state or scrub through animations Entering or leaving a ScrollTrigger area can make an animation play, pause, resume, reverse, restart, or complete...or you can make the scrollbar can act like a scrubber! Pin elements in place Make an element appear immune to scroll changes while the ScrollTrigger is active. This is surprisingly useful for
  6. 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 tim
  7. 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 grea
  8. 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
  9. 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 a
  10. 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 slid
  11. 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 :(.
  12. 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.Con
  13. 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!
  14. 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!
  15. 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 mor
  16. 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 s
  17. 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
  18. 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.
  19. 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
  20. 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 ?
  21. 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
  22. 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
  23. 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.det
  24. Hi, I've been using GSAP 2 for around 2 months for now. By using the knowledge I have I've created some basic animations using it. Now that the GSAP3 has arrived every thing looks a tini-tiny bit difficult.(but can be achieved) I know its new and i also know this is the only place i can get support. My problem is as follows, I have used Tweenmax and scroll magic to create a basic effect. Now that Tweenmax has been merged in GSAP core I cannot use the `.setTween(t1)`. As we have to Specify the animation at first in the Tweenmax and call them later using
  25. Hi, I had been using gsap and scroll magic to show and hide image sequence. But the animations are not smooth. They are choppy. Can anyone help me. Here is the link to the page http://geekpowerdev.com/pivotal-2/ Thanks!
×