RSD Transitions - Post ID 272131

User 2590444 Photo


Registered User
42 posts

Hi Guys,

Been playing with RSD V2 and it is great and have 80% got my head around it but am having trouble with transitions.

I am attempting to have an element slowly enter the page when the page loads from the left and while a can achieve this I can not slow it down it just zooms in no matter the delay or duration settings. I have the state set to out of view, the transition to all properties, ease in and out and the delay to what ever as it has no effect that I can discern.

I have tried to find info on this in your help docs and have read what I have found and the only reference i see in the forums is directing to a link which shows what can be done but no how - if you can direct me to info or let me know where I am going wrong it would be appreciates

Regards

Simmo
User 2088758 Photo


Senior Advisor
3,121 posts

Hi Simmo,

Can you share a link to your website. What you describe it should work.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2590444 Photo


Registered User
42 posts

Hi Steve,

It does work I just cant slow it down - what is the control for this.

It is not a site as such just a file I am playing with - would you like me to attach that?
User 2590444 Photo


Registered User
42 posts

Any thing further on this? Anyone?
User 244626 Photo


Registered User
811 posts

This is a very basic example. I usually find the transitions work backwards from what I think they should. I applied the transition duration to regular state and the out of view transition to the translate X position off screen.
Attachments:
Bootstrap 5 CSS Grid.
User 2590444 Photo


Registered User
42 posts

Thanks Twinstream for the reply and example - I got it thanks but the only thing I don't see in your example is the out of view transition position in terms of setting the x position
User 244626 Photo


Registered User
811 posts

Click on the picture, change the state from "Regular" to "Out of view", and then scroll down to Effects (below Border) and under the Translate setting you will see the "X" position set to -244.
Bootstrap 5 CSS Grid.
User 2590444 Photo


Registered User
42 posts

got it thanks - one final question and I will leave you alone - Is there a way to alter the on load to on scroll or on hover etc
User 244626 Photo


Registered User
811 posts

I would probably approach it by adding two classes to the element then by use of javascript for onscroll or hover removing or adding one of the classes. Setting the transition would be done by greying out each class alone and just setting one class transition at a time the stationary and the toggle.

Sorry I do not have examples as I have not used this feature yet also.....
Bootstrap 5 CSS Grid.
User 2590444 Photo


Registered User
42 posts

Thank you

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.