Questions tagged [scrollmagic]

ScrollMagic is a jQuery plugin which essentially lets you use the scrollbar like a playback scrub control.

Filter by
Sorted by
Tagged with
1 vote
0 answers
39 views

I want to create path for different letters in svg image

I've recently come across the ScrollMagic library. And I'm trying to recreate thier signature animation on scroll (link :- http://scrollmagic.io/examples/advanced/svg_drawing.html ). I want to add ...
anurag's user avatar
  • 11
0 votes
1 answer
55 views

How to use scroll magic for video animation but only start video when container reaches the top

I'm using Scrollmagic to animate a video background Apple style. however, my video container is further down the page so when it gets to it the video has already started scrolling, I'm trying to find ...
dan k's user avatar
  • 139
0 votes
0 answers
15 views

How to get consistent duration when using ScrollMagic `.on('progress')` callback?

I am using this library https://github.com/janpaepke/ScrollMagic . I create a ScrollMagic based animation of 4 elements fade in and out according to the Scene e.progress value. For example when e....
John Xiao's user avatar
  • 1,680
0 votes
0 answers
76 views

All content not showing up on localhost:4000

I made this project for my college hackathon and now I implemented expressJS for newsletter-signup. The newsletter-signup part is working fine but when I run the project on localhost:4000 only two or ...
Pulkit's user avatar
  • 13
0 votes
0 answers
85 views

zoom in/out while scrolling down/up using ScrollMagic

I'm trying to zoom in/out while scrolling down/up using ScrollMagic, currently, while I try to scroll down to zoom in on the image, it works, but after it's completely zoomed in, trying to scroll up ...
betty_'s user avatar
  • 61
0 votes
0 answers
33 views

How do I prevent all the slides in a section slide from appearing on load in ScrollMagic?

I've recently been using ScrollMagic, and so far it's been easy to use. However, after finishing my section slides i've noticed that whenever I load the page at the section slide top, all the slides ...
DiffuseHyperion's user avatar
0 votes
1 answer
195 views

How to use Scrollmagic to animate an SVG path as quickly as the scroll event?

I have the following code snippet: var controller = new ScrollMagic.Controller(); var $line = $("#line"); $line.attr("stroke-dashoffset", $line[0].getTotalLength()); $line.attr("stroke-...
Maharkus's user avatar
  • 2,851
0 votes
0 answers
40 views

ScrollMagic Lots of white space and buggy scrolling UX

I'm getting lots of white space as I'm scrolling into the scrollmagic target section. Also, instead of the section coming into view, it pushes it down like a reverse scroll effect, leaving me with ...
Sambuxc's user avatar
  • 427
0 votes
0 answers
16 views

Scrollmagic bug with .setclasstoggle on slow scroll

When I scroll very slowly, I can catch the moment when .setclasstoggl behaves very strangely. He adds and then removes class, adds and removes. What could be the problem? [enter image description here]...
AlexFreedom17's user avatar
0 votes
1 answer
955 views

Scroll Trigger: How to play the whole animation not by every page scroll once it enters the trigger element?

I have this animation that plays on every page scrolling. What I want to achieve is to play the whole animation when it triggers the id section of the pinned element. So when it enters the pinned ...
laurence keith albano's user avatar
0 votes
1 answer
260 views

React Scroll Magic SectionWipes causing unwanted padding, how to remove it?

I am trying to implement the same scroll component as here: https://bitworking.github.io/react-scrollmagic/section-wipes The code for this component is provided by the github repo itself: https://...
CodeWithMike's user avatar
-2 votes
2 answers
66 views

How to manually delete whitespace at bottom of page

https://demo.joinspheres.com I'm working on a demo scroll animation website and to get it to work the way I want (each animation happens immediately after the next), a ton of whitespace is added to ...
Connor W's user avatar
  • 138
0 votes
0 answers
183 views

Scrollmagic scene speed with automatic trigger on page load

I'm struggling to understand how to manage the speed of the scene I set as intro. It starts automatically when the page is loaded but currently it is too slow. It is probably something easy but I'm a ...
Freddan's user avatar
  • 82
0 votes
1 answer
48 views

Headline not showing above Canvas

I created my portfolio a few months ago and everything was working fine. After about half a year I reopened the code again and now it is not working correctly anymore. I had text show up above a ...
Type Beta's user avatar
0 votes
0 answers
31 views

What's the issue if the render doesn't return anything?

here is my code, and I created a component called showcase and called it from another component, but nothing appears in the window, Can somebody assist me? https://codesandbox.io/s/dreamy-fast-mpc1fc?...
Khansa Boukadida's user avatar
1 vote
0 answers
71 views

ScrollMagic and Scroll Snap Aign bugged

After creating a page split into two parts like in this video https://www.youtube.com/watch?v=jvbL-VqACyM, I added scroll-snap-type: y mandatory; for the page to automatically scroll to a given ...
Uncode's user avatar
  • 11
0 votes
0 answers
100 views

ScrollMagic & TweenMax Adding Scenes

my Javascript knowledge is very limited. I've followed this tutorial: https://www.youtube.com/watch?v=wLUJ9VNzZXo and all is working as described in video. He cuts off at the "add more text ...
Dec's user avatar
  • 15
0 votes
0 answers
73 views

Using GSAP with ScrollMagic

I am fairly new to front end dev with JavaScript, and found several videos, code, documentations on using GSAP with ScrollMagic, but all the syntax are outdated and not functional. I just want to know ...
vibhor sharma's user avatar
0 votes
1 answer
413 views

GSAP onComplete function doesn't fire when scrolling up

I'm using react-gsap and react-scrollmagic and am trying to fire a function when the animation completes. It works well when I scroll down, however, when I scroll up the function doesn't fire. I ...
Smlok's user avatar
  • 598
0 votes
1 answer
538 views

react-scrollmagic 'setPin()': Invalid pin element supplied. error

I'm using react-scrollmagic together with react-gasp and getting an error in the console: (ScrollMagic.Scene) -> ERROR calling method 'setPin()': Invalid pin element supplied. . Everything seems to ...
Smlok's user avatar
  • 598
2 votes
1 answer
287 views

How to update progress

When you scroll down the page, you will see the element with #pin will be sticky and the currentPercentage will keep updating until the value of currentPercentage is 1 and then not sticky anymore. ...
CCCC's user avatar
  • 5,745
3 votes
0 answers
277 views

scroll magic Pin() creating gap

I'm trying to have a parallax effect on my website using ScrollMagic (like this example: http://scrollmagic.io/examples/basic/section_wipes_natural.html ) my HTML code structure is like: <main> ...
Mehrnaz ghaffar's user avatar
2 votes
0 answers
291 views

How to resize SVG Tweens on Scroll to fit with section's background

How to resize a SVG properly to make it zoom on scroll and blend with background. As you can see in the codepen, the example code is not perfect and performing what i want to achieve. I am struggling ...
Bhumika Das's user avatar
0 votes
0 answers
338 views

Video on Scroll Animation really choppy on server

I'm currently working on a Video on Scroll animation. It works really well in local device but when I upload it on the server it gets lagged too much. I tried compressing the video but nothing is ...
Kanish's user avatar
  • 1
0 votes
0 answers
186 views

ScrollMagic React

How I can do something like planet on this link with help ScrollMagic in React? My code <div className={styles.containerMain}> <div> <Controller> <Scene ...
Валерия Клопова's user avatar
-1 votes
1 answer
98 views

How to Create Scroll Transition?

I want to add a transition of this type on a website I creating on React. Can some please guide me on how I can achieve this or is there any lib that I can refer? Scroll Transition
Ashish's user avatar
  • 51
-2 votes
1 answer
401 views

ScrollMagic - Stacking divs

I want to achieve something similar like this example: https://scrollmagic.io/examples/basic/section_wipes_natural.html But instead of fixed height divs, here is the idea: The parent div has lots of ...
dvarga's user avatar
  • 51
0 votes
0 answers
190 views

GSAP ScrollMagic - setPin() is bugging

I am asking here cause I can't debug my program. I wanted to do a page to scroll vertically and then scroll horizontally till the end of the 'test' section and then scroll vertically again. The thing ...
Roro's user avatar
  • 11
0 votes
1 answer
872 views

Split Screen of half height with half side scrollable

I am trying to make a split screen with half height. I want left side fixed and the right side scrolable, both of them having 50% height. I tried using ScrollMagic and achieved the effect with 100% ...
Malika Arora's user avatar
0 votes
1 answer
904 views

Animate SVG Path on scroll

I'm using ScrollMagic & GSAP to animate an SVG path on scroll. This works perfectly fine. But as soon as I replace the path with another SVG from the Noun Project, the scroll path-animation no ...
rb3652's user avatar
  • 425
0 votes
0 answers
569 views

ScrollMagic - Stop scrolling behaviour until animation is finished

I want to prevent my users to scroll for ages just to be sure the animation finishes, so my question is, are there any events like "onStart" / "onComplete" for the animation, so I ...
dstN's user avatar
  • 332
0 votes
1 answer
124 views

Scrollmagic stops working when website is uploaded to server?

I've created a website that uses Scrollmagic to load in portions of the site (ie, change their opacity and make them move up) as the user scrolls through it. It works fine on the HTML file on my ...
jlerew's user avatar
  • 3
0 votes
0 answers
465 views

Scrollmagic + GSAP horizontal scroll for tablets

I'm currently working on a horizontal scrolling website with ScrollMagic and GSAP. It's working well on desktops with mousewheel function. However, when it comes to tablets where mousewheel is not ...
false-hero's user avatar
0 votes
0 answers
174 views

Issue when export react-scrollmagic

I have an issue, I'm using react-scrollmagic for animate my website, I have the js file with the code and I use "export default functionName" for export the js to my app.js but it gives me ...
Gabriele Sabatino's user avatar
0 votes
0 answers
458 views

Using Scrollmagic for horizontal scroll to the right (not left) leaves big white space

I'm using Scrollmagic to have horizontal scrolling. All works fine when things scroll to the left. When I have it scroll to the right, however, after the last image is a big white space. I am using ...
LauraNMS's user avatar
  • 2,720
2 votes
1 answer
819 views

ScrollMagic responsive duration / endpoint for a sticky nav?

I'm using Scroll Magic for a sticky side nav. I would like the side nav to STOP right before the next section but as of now the duration endpoint is showing about 200px below where I would want. How ...
hendy0817's user avatar
  • 979
0 votes
1 answer
347 views

How to set default element position AnimeJs/ Scollmagic

So what I am trying to achieve is to have the SVG element slide into the viewport as the user scrolls within the selected div. The effect is partially working since on the initial load, it doesn't ...
Luka's user avatar
  • 171
0 votes
0 answers
118 views

ScrollMagic loop - scene duration the same as the video duration that's part of the scene

I have a loop of scenes with videos that play on scroll (loop because it's integrated with WordPress ACF Flexible fields). I'm using ScrollMagic for that (and GSAP but that doesn't apply here). What I'...
Filip Chrapek's user avatar
1 vote
0 answers
198 views

ScrollMagic on position absolute only works when indicators are enabled

My goal is to create an absolutely positioned div as the background of the website and the parent of the ScrollMagic scene. By doing this, the title and other content can appear above the scrolling/...
Anchey Peng's user avatar
0 votes
1 answer
147 views

Importing problems with webpack/react

I am trying to import this module called debug.addIndicators for ScrollMagic in a React project. This of course means I have to use es6 so I add to my import "../node_modules/scrollmagic/...
King Retracted's user avatar
0 votes
1 answer
551 views

Interacting with Divs Under Other Divs (Lower Z-Index Passthrough)

I have a webpage where two divs are on top of each other, and both are the same width, so the top div completely covers the bottom div. The challenge: I need users to be able to interact with the ...
jmindel's user avatar
  • 475
0 votes
1 answer
837 views

ScrollMagic controller is not a constructor Error

i have been following Dev ED's (youtuber) scrollmagic tutorial after following throught it i am getting an error i have tried multiple solutions and tutorials but i keep getting stuck main.js:9 ...
ibtisam31's user avatar
0 votes
0 answers
476 views

ScrollMagic/TweenMax, one timeline for multiple scenes/breakpoints

I have same elements that I need to animate to different parts of page while scrolling (up-down, left-right and so on). What I did is added scene and timeline for each breakpoint (like #one, #two, ...,...
Felix's user avatar
  • 55
0 votes
0 answers
86 views

How can I make an animation last "n" amount of seconds when scrolling down?

I did this example to try to explain my problem. I have an element of class .square and I want that when the trigger that is on the same .square is fired and the transition lasts 10 real seconds, ...
yavg's user avatar
  • 2,781
1 vote
0 answers
585 views

Webpack & Scrollmagic - debug.addIndicators not available

I use scrollmagic in a webpack (v4) project. it works fine, but when i want to use "debug.addIndicators" in the Scrollmagic.Scene() i get an error: What is the mistake here? My imports: ...
pkberlin's user avatar
  • 822
0 votes
0 answers
118 views

How can I solve overflow happen between two sections when using ScrollMagic and GSAP to animate them?

This is the first scene on intro video happen and it take 9200 time and after end it on the same section I need to make other scene which take 100% but when second scene animation the other section ...
Mohamed Hessuin's user avatar
1 vote
1 answer
713 views

Controlling HTML5 video with scrollMagic, why stuttured animation / droped frames?

Hey SO members, I want to play back and forth a HTML5 video along with the scroll. The animation controls the video frame by frame regarding scroll amount. I coded (it's lightweight and very simple) ...
Yumigo's user avatar
  • 45
0 votes
0 answers
954 views

Is there a way in ScrollMagic to make the setPin duration be equal to time instead of scroll distance?

I have a tween that is triggered by scrolling to a specific section that pins, and then the animation plays. Right now it plays through on trigger, not tied to scroll, but the pin itself is set to ...
Joshua Tuscan's user avatar
0 votes
1 answer
188 views

Fade background from right to left

I managed with the help of the ScrollMagic library to change my background img for my section three-section-container depending on scroll position. Additionally, I managed to add an overlay that will ...
Obsesie's user avatar
  • 171
0 votes
0 answers
247 views

How do I make a step-by-step scroll?

How do I make scrolling stepwise? I use GSAP and ScrollMagic for text appearance. Example here
Pancil_code's user avatar

1
2 3 4 5
9