I'm trying to place a very simple scroll animation inside a Framer Motion div, something like this:
<motion.div
animate={{
translateY: [1000, 0]
}}
transition={{ duration: 1 }}
>
<BottomSection>
<ScrollDiv>
<Link to="scroll-down" spy={true} smooth={true} offset={50} duration={500}>
Scroll
</Link>
</ScrollDiv>
</BottomSection>
</motion.div>
<Space top="_360" bottom="_360" />
<Element name="scroll-down">
</Element>
enter code here
However, if I take my ScrollDiv and place it ouside the motion.div, the scroll works correctly. Is there some kind of incompatibility between these 2 libraries? How can I fix this?
While I do not have an answer for you, maybe I can help narrow it down. So I am using react-zoom-pan-pinch library with Framer motion library, and also thought there may be an incompatibility between the two. After disabling react-zoom-pan-pinch, Framer Motion still exhibited the same behavior (fluttering photo position when a second finger touch is registered during a drag event -- which I think is Framer Motion switching back and forth between both finger positions for where to display the photo in the gallery).
I dont know if this is what you are seeing or directly helps, but removing ScrollDiv functionality to see if Framer Motion still causes the issue alone will at least allow you to rule out one library and focus your efforts. As for framer motion, I did find this bug which looks like there is not an active solution yet
https://github.com/framer/motion/issues/185
Related
Here is the desired outcome I'm looking to achieve by scrolling using react-scroll-parallax.
On Mobile browser
View web browser example here
Description
I want to create a website with the parallax affect shown above. The key elements being a website build in react containing three pages.
While scrolling from Page 1 to Page 2 I want the mobile device mock to start halfway on the screen (as to avoid the other content of page 1), then move to being basically centered.
While scrolling from Page 2 to Page 3, the website and components stick and once again act like a normal website scroll.
Additionally, during the scroll from Page 1 to Page 2, I want the content inside the device mock to scroll as well.
What I tried
For starters I was able to get nearly the affect I wanted by using a div with it's z-index and absolute position set, and parallax on translateY of -50, 125.
<div className={"absolute z-10 w-full"}>
<Parallax translateY={[-50, 125]}></Parallax>
</div>
The problem became however when I wanted to place content inside the div. Having another div within the parallax that also had z-index set seemed to mess with the parallax affect.
Important notes
Content inside device mock
One issue I found that was tricky was trying to place the content inside the device mock. I want a parallax both on the device mock itself, and the content within it.
I'm not entirely sure how I should crop the content inside the device mock.
The device mock svg frame and device mock mask can be found here if you want to give it a try
Device mock svg and mask
I tried imgs with various z-indexes, masking the div with an svg mask, using image backgrounds. Nothing is quite getting the preferred outcome.
Scaling of device mock
I want to make sure this works well on both mobile and browser. With that said I was trying to use margins to scale the device mock but I had a hard time with trying to then correctly get the mask to work for the content within the mock.
I'm not sure if using dedicated width and height sizes would be the ideal way to go, but very open to suggestions! It seems hard to scale the device frame and the mask properly.
Parallax of device and parallax of device content
I want the content inside the device mock to be html so that I can change it more than just an image. That being said the most important feature I want is for both the device and the content inside to have a parallax scroll affect.
Summary
I know this is a bit much for a quick simple stack overflow issue, but I've been trying a lot to get this to work and just can't seem to nail down the little details correctly. I sincerely appreciate all help and suggestions and if there is anything else I can provide please let me know!
The trickier part of the request was blowing up the <svg>, adding new <path /> and <clipPath /> for the color swap inside the phone mock.
Eventually I got it working here. The part linking the clipPath transition to the scroll progress looks like this:
const [y, setY] = React.useState(1739);
const onProgressChange = React.useCallback(
(a) =>
setY(Math.max(Math.min(1739, 1739 - ((a - 0.24) / 0.0018) * 17), 36)),
[setY]
);
const { ref } = useParallax({
translateY: [0, 185],
onProgressChange
});
The 1739 and 36 are max and min values for the translation and they are strictly related to the svg's viewBox. The other values allow tweaking the start, end and speed of animation, with regards to overall scroll progress.
This, together with some CSS, took care of binding the right animations to the correct scroll progress.
Feel free to tweak it some more, especially if you add more markup.
The other thing I wanted was a function activated shortly after scrolling, which would snap the scroll to certain positions. Namely, to the .page elements.
I used gsap's ScrollTrigger plugin for the task, for multiple reasons:
I'm somewhat familiar with it (used it before)
it's performant, light and non-obtrusive (basically quits when it detects another user scroll)
listens to all relevant events (touch, mouse pointer, keyboard) without me having to make sense of them, providing a unified interface.
uses inertia (if you scroll down faster from page 1 it will scroll past page 2, directly to page 3 - other scroll plugins limit you to having to scroll once for each page change)
works well on mobile devices
There are other libs/plugins out there for the task, you don't have to use gsap (although I do think it's awesome). If you end up including it in your project, make sure you comply with their licensing (which is not MIT).
By the way, my first choice for the parallax effect per-se would also be gsap, as their timelines provide a lot of flexibility and options.
Their most advanced stuff is reserved for subscribers, but even if you limit yourself to the free plugins, you're still getting more than from alternative libs/plugins, IMHO.
See it working.
I need to write animation like this website when loading.
http://www.cloverlemon.io
https://codyhouse.co/gem/animated-page-transition
I only need animation like horizontal open transition using framer (or) any other library in react.
please help me. ( horizontal open transition )
I have no time to learn framer. so i need your help.
I wish to achieve the smooth transition from one state to another, state given in image:
And the final state:
Here is the temporary working Codepen:
Codepen Link
<transition name="fade">
<h1 v-if="!searchStatus">{{heading}}</h1>
</transition>
Is there any way smoothing the transition.
The transitions built into Vuetify are very, very simple and not designed for the kind of choreographed animation it looks like you're trying to build. They're for things like showing or hiding an element, moving between tabs in a tab pane, etc. (i.e. animating a single element), and not designed to coordinate changes happening between multiple elements. Unfortunately, as it says in this blog post "there is no silver bullet for great animations."
I suggest that you don't try to rely on built-in Vuetify transitions here, but instead go for a plain CSS keyframe-based strategy (here's an old but decent introduction to the approach). Alternatively, if you'd like to use a tool built specifically for animation, GSAP is about as close to an industry standard as there is, although it might be overkill for the scenario you've described.
How can i achieve this kind of animation effect (see link below) and where do I need to start learning, is this part of css or html5 or plugins, etc..
I have a startup knowledge in css and html5, but I have no idea how to achieve the effect.
http://www.terredevenements.com/en/
*the effect i'm referring to is the movement of the foreground images while the mouse hovers and still maintaining its background to be static
This effect is called "parallax scrolling"
The basic idea is to layer images on top of each other and move them simultaneously but at different speeds, foreground moving faster than background.
Capturing and utilizing mouse events can be done with javascript/jQuery, and the animation can also be done with those languages or in combination with CSS3 animations.
There are quite a few jQuery plugins out there that can help you quickly achieve this effect.
See parallax.js
Or for more plugins: http://bashooka.com/coding/best-jquery-parallax-plugins/
Could you please let me know how to disable layer animation?
I have selected "Fade" for the "Start Transition", and enter the number "0" for the "Start Duration". These settings are working fine in Firefox but isn't working for Chrome browser. Please let me know.
Revolution Slider version - 4.6.5
Rocco theme version - 1.3
If your animation gets stuck, consider checking you animation settings. If you are using revolution slider, change the settings as below. It worked for me!
The slideshow was disappearing after a few seconds of the first slideshow.
The next settings for me have worked:
Go to "Edit slides":
General setting: Transitions: no transitions, Rotation: 0, Transition Duration: 0, Delay: empty.
Layers timing & sorting: Start: 0, End: 9000 - for all layers.
Layer animation -> Start transition: Start duration: 0, Split delay: 0 - for all layers.
If you need a specific layer(s) to be static through all slides then take a look at this documentation page and if you are using Revolution Slider below version 5.0 then take a look at this screenshot.
Here is my detailed answer for Revolution Slider ver 4.6.93 that I am using:
On your Slider General Settings find an option "Enable Static Layers" and turn it on, then click Save Settings
Click Edit Slides button
At the bottom of the page you should now see "Edit Static/Global Layers" button. Click this button and create static elements there. They will be visible on all slides of your slider.
Hope it helps.
So I know I'm a little late to the party, and this response most likely doesn't apply top the version originally posted. This works for version 6. I don't know if this is the way its supposed to work, but it does work.
Click the GEAR icon, or Module options when editing your slider. Select 'General',and look for "Dynamic Viewport Loading". Turn it ON and set it to WAIT and 0%.
This will stop the animation from playing, allowing you to use your scroll based animations at their correct times, and other cool stuff!
Stop Animation By Setting Dynamic Viewport Loading to On and 0px
you can set fade -> no transition if it's a background or simple transition -> no animation if it's a simple layer
screenShot from slider rev