Questions tagged [scrollmagic]
ScrollMagic is a jQuery plugin which essentially lets you use the scrollbar like a playback scrub control.
413
questions
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 ...
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 ...
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....
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 ...
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 ...
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 ...
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-...
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 ...
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]...
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 ...
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://...
-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 ...
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 ...
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 ...
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?...
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 ...
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 ...
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 ...
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 ...
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 ...
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.
...
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>
...
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 ...
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 ...
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 ...
-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
-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 ...
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 ...
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% ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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'...
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/...
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/...
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 ...
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 ...
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, ...,...
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, ...
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:
...
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 ...
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) ...
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 ...
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 ...
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