Create active transitions to elements...

User 2699991 Photo


Registered User
4,744 posts
Online Now

Wayan Jaya wrote:
Wayan Jaya wrote:
[quote=Inger]Ed should let us have a look at his site, so that we can see what kind of animations he has placed there. Then we wouldn't have to make half-qualified guesses.


Doesn't matter what the animation is if he is using "outofview" there is no way at the moment that I can get it to work using the "animation-iteration-count" thingy

If I can get that css "animation-iteration-count" to work on "outofview" then that doesn't matter what transitions/animations he is using.

I can get it to work beautifully using Custom CSS

It maybe that with a little bit of JS code, that would work too but I am nowhere near good enough with JS

it needs something that will take the ID of the container
look to see what position it is on the page (i.e in view)
then add the CSS or remove it depending on the container (or element) position

I have done some JS code that loads an element on page load just the once, but that doesn't stop the animation from repeating I am trying to see if I can tweek it


UPDATE2
scratch the previous update
Although I got it to work to a fashion, it is so much work & fraught with possible errors and a significant loss of loading speed I don't think it's worth doing.

The problem with using the class "outofview" and trying to add the 'animation-iteration-count" thingy
is that the actual "outofview" is controlled by some JS which is built within Site Designer foundation framework, what that does put simply is it looks at any element with the class "outofview" calculates it's position if its out of view, it adds the class "out of view" if it comes into view, it removes the class "out of view"
So the "animation-iteration-count" thingy fires off no problem for the first time, but because the class name gets added if the user scrolls again up or down, then the class name gets removed and added again, resulting in the animation-iteration-count thingy, actually losing count and thinks it's got to start again.

I have been fiddling with this since very early this morning, and have just come up against brick walls.

If someone out there is a guru with JS, then it might be possible to make the adding/removal of a class name (with the same actions as the JS for "outofview" but make it so it only happens once, that way it may be possible to do what Ed wishes to do, (and me for that matter)
until then
ED I'm sorry I cant come up with anything workable from within Site Designer unless it's using custom CSS and custom JS I await with eager anticipation in-case someone comes up with something less intensive
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/prove-human/
User 244626 Photo


Registered User
811 posts

You could use a simple plugin called Scrolla if you want to use animate.css (I would use version 3 which is a option in the settings when initializing the plugin)

https://maximzhurkin.github.io/jquery-scrolla/

I did a small modification to only have the animations happen when scrolling down....not back up.

I added in the option of using the data-once="true" if you prefer the animation to only happen once and not repeat.

I removed the offset setting also.
Attachments:
Bootstrap 5 CSS Grid.
User 2699991 Photo


Registered User
4,744 posts
Online Now

Twinstream wrote:
You could use a simple plugin called Scrolla if you want to use animate.css (I would use version 3 which is a option in the settings when initializing the plugin)

https://maximzhurkin.github.io/jquery-scrolla/

I did a small modification to only have the animations happen when scrolling down....not back up.

I added in the option of using the data-once="true" if you prefer the animation to only happen once and not repeat.

I removed the offset setting also.


Thats great Twinstrean except Ed is using "outofview" from site designer itself,,
but what you have is really cool too
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/prove-human/
User 2826919 Photo


Registered User
53 posts

Ed Dean wrote:
Most helpful, thank you. I still have a lot to figure out however I reckon playing with the effects and settings will be the way to go. I successfully created an effect that is viable.



Wayan Jaya wrote:
Space Cadet]here is a second demo showing a bit clearer how the animation starts before out of view comes in
https://youtu.be/tKys0ZqC3ws




Need to refresh been a long time, link removed
Blissfully Ignorant In Jacksonville, Florida
When all else fails read the instructions.
www.website-design-jacksonville.com
RSD 5.0 what a pleasant surprise. Fantastic!
User 2699991 Photo


Registered User
4,744 posts
Online Now

Ed Dean wrote:
Wayan Jaya wrote:
Ed Dean wrote:
Ed Dean wrote:
Most helpful, thank you. I still have a lot to figure out however I reckon playing with the effects and settings will be the way to go. I successfully created an effect that is viable.


Wayan Jaya Space Cadet wrote:
here is a second demo showing a bit clearer how the animation starts before out of view comes in
https://youtu.be/tKys0ZqC3ws


Almost 3 years
I no longer do videos for YouTube


Need to refresh been a long time, link removed
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/prove-human/
User 3157442 Photo


Guest
3 posts

As per my opinion, you typically can't create complex animations like those you're describing purely within a responsive design tool like RSD (Responsive Site Designer) without adding custom code.

RSD and similar tools are often designed to simplify the design process and handle the basics, but more advanced features like scroll-triggered transitions might require custom coding, typically with JavaScript and CSS. Libraries such as ScrollMagic or AOS (Animate On Scroll) can be useful in creating these effects.

I hope this will help you.
User 3158040 Photo


Guest
5 posts

To create active transitions to elements on a website, you can use CSS (Cascading Style Sheets) animations and transitions. These techniques allow you to add smooth and engaging effects when elements change states or properties. Here are some examples of how to create active transitions using CSS:

Fade-in and Fade-out:
css
Copy code
/* HTML */
<div class="element"></div>

/* CSS */
.element {
opacity: 0; /* Initially hidden */
transition: opacity 0.3s ease;
}

.element.active {
opacity: 1; /* Fades in when 'active' class is added */
}
Slide-in from Left:
css
Copy code
/* HTML */
<div class="element"></div>

/* CSS */
.element {
transform: translateX(-100%); /* Initially off-screen to the left */
transition: transform 0.5s ease;
}

.element.active {
transform: translateX(0); /* Slides in from the left when 'active' class is added */
}
Scale on Hover:
css
Copy code
/* HTML */
<div class="element"></div>

/* CSS */
.element {
transform: scale(1); /* Normal size */
transition: transform 0.3s ease;
}

.element:hover {
transform: scale(1.2); /* Scales up on hover */
}
Color Change on Click:
css
Copy code
/* HTML */
<div class="element"></div>

/* CSS */
.element {
background-color: blue; /* Initial color */
transition: background-color 0.3s ease;
}

.element.active {
background-color: red; /* Changes color to red when 'active' class is added */
}
Rotate on Button Click:
css
Copy code
/* HTML */
<div class="element"></div>
<button onclick="toggleRotation()">Rotate</button>

/* CSS */
.element {
transform: rotate(0deg); /* Initially no rotation */
transition: transform 0.5s ease;
}

.rotate-active {
transform: rotate(45deg); /* Rotates 45 degrees when 'rotate-active' class is added */
}
In the above examples, the 'active' class is added or removed from the HTML element through JavaScript or user interactions. The CSS transitions smoothly animate the change of properties when the 'active' class is toggled. You can customize the transition duration, timing function (ease, linear, ease-in, ease-out, etc.), and other properties to achieve the desired effect.

Remember to add vendor prefixes (-webkit-, -moz-, -ms-, -o-) for cross-browser compatibility when using some CSS properties. Also, JavaScript can be used to toggle the 'active' class on elements in response to user actions like clicks, hovers, or other events.




User 3160744 Photo


Guest
1 post

There's no examples anywhere I can find. Surprising that it is not included since it seems to be standard with other folks.

User 3167392 Photo


Guest
2 posts

1. **Stack Overflow: The Oracle of Code**
*Description:* The go-to platform where programmers seek enlightenment and share their wisdom in the sacred language of code.

2. **GitHub Discussions: Where Code Conversations Flow**
*Description:* A digital agora where developers commune to discuss projects, exchange ideas, and decipher the hieroglyphics of version control.

3. **Designer News: Sipping Java, Spilling Design Tea**
*Description:* A chic watering hole where designers sip on Java and dish out the latest trends, critiques, and the occasional hot take on all things design.

4. **SitePoint: The Pilgrimage for Web Dev Wisdom**
*Description:* A cyber-monastery where web developers make their pilgrimage to seek guidance, share insights, and discuss the ever-evolving commandments of the web.

5. **Dev.to: The Social Code Pub**
*Description:* A digital pub where developers gather to discuss tech over pints of code. No cover charge, but the entrance fee is a pull request.

6. **CSS-Tricks: Unraveling the Mysteries of Style**
*Description:* A sacred sanctuary where front-end disciples congregate to decode the mysteries of CSS, vanquish browser demons, and celebrate the art of styling.

7. **Hacker News: Where the Tech Illuminati Gather**
*Description:* An elite gathering of the tech illuminati, where the latest innovations, controversies, and groundbreaking revelations are dissected and debated with surgical precision.

8. **Dribbble: The Artisanal Marketplace of Pixels**
*Description:* An artisanal marketplace where pixel craftsmen showcase their visual concoctions, engage in design duels, and exchange aesthetic potions.

9. **CodePen: The Playgrounds of Digital Architects**
*Description:* Playgrounds where digital architects sculpt their code, creating interactive masterpieces and sharing their magnum opuses with the world.

10. **Webflow Community: Where No-Code Wizards Convene**
*Description:* A magical realm where no-code wizards convene to share spells, conjure web experiences, and collectively reshape the digital landscape without touching a line of code.
User 3167484 Photo


Guest
4 posts

It seems challenging to control the "animation-iteration-count" with the "outofview" class due to the dynamic nature of its addition and removal. Custom CSS and JS solutions have been explored, but a more efficient approach awaits someone skilled in JS to modify class actions for a one-time occurrence, providing a potential solution for Ed's animation concerns within Site Designer.






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.