Responsive Editing Mode#7

Be able to tweak an animation for each breakpoint instead of having to duplicate an animation and change what I need for that specific breakpoint

To clarify, this would be in addition to the current Responsive slider. So you can choose what size screen the animation runs on with the slider. And you can edit the animation on different screen sizes too with a responsive editing mode.

Maybe the two options are combined. I imagine it could be something like clicking on the device icon and then it would put you into a editing mode for only that size. It should gray out any of the items that can’t change in responsive mode (like you can’t edit the selector or animation type), but you can edit the properties and their values.

And it should show what the main animation has set on it (maybe set property is a grayed out placeholder value so you know what the default is)

This should be fixed as GSAP 3.11 introduced gsap.matchMedia() … or at least exposing that interface in a smart way would add many options.

I see this is the most requested feature now (by a long shot), great comments above. Another reason why this is so important has to do with the differences in Desktop working with a landscape orientation and Smartphone working with a portrait orientation. The need to adjust ‘Start Viewport’ and ‘End Viewport’ areas for different orientations is vital.

For example, on Desktop you may want an animation to begin at 90%, however (because of the additional vertical space on a Smartphone) this animation begins too soon now, and instead you’ll want the same animation to begin at 75% for Smartphone. A way to easily adjust this between different breakpoints would be a huge improvement. What a great product guys, the work you are all doing is truly inspirational. Thank you so much 🙏🏼

Hi there, i have a problem with the responsive option. When i installed the motion page there was an option on the WP sidebar where you can enable or desable the devices but now there isn’t. It shows only the motion page icon and take direct to the panel and when i put on the breakpoints to desable on specific devices it doesn’t work. Can some one help me and tell how i can do it pls????. I’m new on this and the devices animation is not working the way i need to…

For anyone waiting for an update on that in core, I have a workaround for the moment (sorry if this is obvious).
I struggled with responsiveness in a case of a horizontal scroll. My scrolled element had a more or less constant width, but with the viewport width decreasing, the % width of the visible part of the element was getting smaller, so couldn’t set a fixed translatex animation, regardless of the unit.
So I put the translatex value in my stylesheet and did as many breakpoints as necesary using a variable and multiplying this variable by some % value for each breakpoint, I’ve set my default variable to 0 (so that initially the element does not move) and then animated the variable in MP to a value of 100. I adjusted the multiplication factor for each breakpoint in my stylesheet and got the desired result.
As example my stylesheet looked something like this:
.timeline-wrapper –move-timeline: 0;
@media only screen and (max-width:1024px) transform: translatex(calc( var(–move-timeline) -2.5% ));
}
@media only screen and (max-width:768px) transform: translatex(calc( var(–move-timeline) -3.5% ));
}
}
and then in MP i’ve used the custom option and there I’ve put to animate the –move-timeline variable and as value put 100. And voila - everything is working nice.
I’m sure this can be adjusted to animate any other css property, event with more advanced calculation functions, incl. min and max. And this allows you to use unlimited number of breakpoints, whereas I’m sure MP responsive implementation will use no more than 4.
Hope this helps somebody… 👍

And don’t forget the windows resize ;-) When I’m on the desktop, I want to resize the browser window and all the breakpoints are correct. at the moment I have to refresh the page…

2 years ago it was suggested, any update when this will be implemented ?

Please update this! Why responsive is not here already? This is a must have. Duplicating animations is a pain and will add unnecessary overhead.

Wait this was requested two years ago… And we are still waiting on it. Guys are you supporting this plugin or are we wasting our time. Also I have sent various requests via email and messenger on other issues and I am getting 0 response.