Questions tagged [scrollmagic]
ScrollMagic is a jQuery plugin which essentially lets you use the scrollbar like a playback scrub control.
415
questions
0
votes
0
answers
14
views
Why my setPin in scrollMagic don't pin in react but in normal html it works properly?
I have a problem in reactjs wherein My setPin don't work properly in reactjs but in normal html it works properly...
Basically the code was something like this in normal html
const controller = ...
0
votes
0
answers
10
views
How to implement ScrollMagic videos to start on iPhone
I built my website which has 3 videos with scrollmagic. It works perfectly on pc, android, and iPad (in Safari too). But these videos does not start on my iPhone. I tried Safari and Chrome. I also ...
0
votes
0
answers
10
views
How to set previous scene's end to triggerElement of next scene
I'm new in ScrollMagic. I want my scenes to start exactly after previous scene. How can I manage this?
0
votes
0
answers
10
views
GSAP and scrollmagic how to reduce the space between one end and the next start
I did a codepen example of the scroll animation I'm doing on a website.
Everything is working as intended: when the first div of text and image goes to opacity 0, the next one comes to opacity 1 in ...
0
votes
1
answer
22
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
15
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
15
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
28
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
57
views
ScrollMagic infinite scroll with snap effect
hope I don’t create a double of some tickets…
I’m a novice in JS so I hope that someone have already tried to do this.
I’m trying to do an infinite scroll like this example:
http://scrollmagic.io/...
0
votes
0
answers
21
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
54
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
81
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 ...
0
votes
0
answers
46
views
React ScrollMagic .addIndicator() plugin missing; How do I install the neededed component for scrollMagic in react?
This is the error that I'm receiving
10:43:27:958 (ScrollMagic.Scene) -> ERROR calling addIndicators() due to missing Plugin 'debug.addIndicators'. Please make sure to include plugins/debug....
0
votes
0
answers
87
views
How to implement section wipe from ScrollMagic into horizontal website?
So far I built a horizontal scrolling page in html and css in reference to this article (https://redstapler.co/pure-css-horizontal-scrolling-website-tutorial/). Now I want to include wiping between ...
2
votes
1
answer
95
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.
...
0
votes
0
answers
98
views
Animate text at specific duration on scroll in image sequence using scrollmagic and gsap
I have a scrollmagic scene that animates an image sequence on being triggered and as I scroll. What I am attempting to do is at specific parts of the image sequence (for eg., img 1 to 5 or img 10 to ...
1
vote
0
answers
80
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
82
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
153
views
How to use SVG image mask on scroll magic animation
I am trying to create a svg image mask using scroll magic like as it's in accenture's website. The SVG Logo to mask the background image while on scroll.
<mask id="mask" x="0" y=...
0
votes
0
answers
142
views
How do I pin an image on a split screen with React-ScrollMagic?
I am making my professional portfolio and am in need of a little help.
I'm wanting to utilize React ScrollMagic to keep my portfolio image pinned on the right side of the split screen while I scroll ...
0
votes
0
answers
150
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
40
views
Unable to Call JS Instance in Rails 6 View from Webpack Using ScrollMagic
I'm trying to replicate a ScrollMagic example in Rails 6. It's the Section Wipes example.
Here is my javascript file structure to which I've moved the files to the packs directory.
This is my ...
0
votes
0
answers
39
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 ...
0
votes
0
answers
108
views
How to switch from horizontal to vertical scrolling and vice versa during scrolling?
Maybe someone has time to review and correct the script - codepen.io
Here is a small problem, it’s incorrect scrolling and changing the directions of the scrolling (from horizontal scrolling to ...
-1
votes
1
answer
44
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
0
votes
0
answers
84
views
how to make Parallax Sections with top of the image by using Scroll Magic
I made Parallax Sections by using "Scroll magic"
what I want is background-image (which in first Parallax Sections) start as top of the image.
because now it start as middle of image
this is ...
-2
votes
1
answer
93
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
156
views
Auto scroll using scrollmagic
I have just start development on ScrollMagic and GSAP, 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 ...
0
votes
0
answers
53
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
138
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
604
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
167
views
How to preload images into an array for scrolling image sequence (JS)?
I'm trying to bind an image sequence to scroll using Javascript but because the images aren't preloaded it's very janky at the moment. How can I preload all the images in an array to ensure they're ...
0
votes
0
answers
258
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
53
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
270
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
83
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
172
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
319
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
176
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
43
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
113
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
65
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
202
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
462
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
223
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
53
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
381
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
44
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
381
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
665
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 ...