I tried to find a solution but with no luck unfortunately. I’m trying to create one type of animation when “Scroll into view”. It’s just an animation to animate elements up when they are in view.
Though I can’t seem to find a way to do so. For example: I added a class “move-up” to a H2. That H2 has now two classes “h2 move-up”. When creating that animation it takes both classes: Markup 2022-06-16 at 12.11.06.png - Droplr and can’t select only the “move-up” class.
It would be awesome to create one class to add on each element where that animation must be added to. So when I give an element the class “move-up” it would trigger that animation automatically. Now it isn’t possible because in most cases one element has multiple classes.
Yeah, you need to create it on the base class. Because if you add the interaction to the combo class, then change or remove that name, it’ll break it. At that point it’s manually adding the new target to each action in the list.
Just insert a dummy div or something on the page and give it a class of “move-up”. And if you want to add “move-down”, etc. Then add another dummy div and give it that move down class. Simply do this for all the moving interactions you want. Now in the interaction set the animation on the “move-up, move-down, etc” class to move them the way you want.
Now when you add the combo class to your h2’s, it’ll trigger those without affecting all other h2’s.
It’s actually looking at the dummy div’s class for the interaction. But the heading you wanted will get added. If you want to remove it from that interaction, you just delete the combo-class. This will keep the interaction from breaking.
Thank you for your answer, I will try this. It would be so much easier when it’s just possible to assign an animation to a single class but this looks like a good workaround.
Then after I assigned the class “move-up” to multiple H2 elements. Though they all trigger when one animation is triggered. So all H2 are moving up when the first is triggered. Here is a short screencast: Screen Capture on 2022-06-21 at 12-48-18.mp4 - Droplr
Can you please assist a bit further here?
Thanks in advance.
Justin
Okay, let me do a quick video so you can see how to fix it… I think that’s better than typing… so just add the interaction to the ‘section-title’ div and target the ‘move-up’ as children. Then you can use it for any other interactions on the site, without starting over. Simply add any element and give it a combo class of ‘move-up’ and you’re done.
Thanks for the video, that worked out. So thanks for that! Is there also a way to trigger every element that has the move-up class? So that I can just give an element the move-up class which triggers the animation automatically on scroll in view?
Sure, change the interaction to move-up instead of h2 move-up. Just put any element inside the same trigger div with a class of section-title. Then add a 50% offset so it’s visible.
