How can I animate an existing element when appending a new one?
I am attempting to create a chatroom animation where new messages are generated automatically.
Here is my codepen link for your reference.
https://codepen.io/hackett-lai/pen/MWzdeBB
1) I am looking for a smooth "push up" animation effect for the previous messages when a new message is created.
2) I also want my message to grow from the bottom of the div. Currently, I have achieved the visual effect, but I feel like there might be a better way to implement it.
Thanks all 🥹
26 Replies
I’ve tried to add
transform: translateY but still no luckI've tried to use
scrollIntoView to kind of achieve the "scroll-up" animation. however I found that everytime When I .remove() element from the DOM, the scroll-up effect will break. Currently my solution is add a counter and only run the delete action every 10 time.
New codepen:
https://codepen.io/hackett-lai/pen/mdQZryrRight~~ so here is what I've got by so far..
https://codepen.io/hackett-lai/pen/mdQZOMG
I've added some additional styling, but I'm still unsure how to prevent the animation break when using the
.remove() function to remove elements. I'm uncertain about the impact on performance, so I'm considering increasing the hideCounter condition from if (hideCounter == 10) to if (hideCounter == 20) or possibly a higher number.
Oh no … if I use scrollIntoView , I will force the page scrolling back to the last message. I can’t use this if I want to put this animation in my website with other contentWhy do you need/want to remove the older messages?
well because I'm doing this animation for decoration only, And I dun want my html elements to become more and more if user stay on my page for a long time
I've also noticed the animation is running out of the box
oh that's a visual effect which I intended to make the chatlist a bit wider than the glass
Ahhh
I also was using the wrong codepen lol
that'll do it
I was using the old one
I'm kind of making progress I guess, I turn all the
.bubble into position: absolute; which stick all of message at the bottom and than I'm trying to transform = translateY(-${some value}px) to push it up.kinda like that
What's wrong with this?
https://codepen.io/croganm/pen/VwVJrPR
Also, to be fair, I probably would have built this using a translate function
but what you had works
This way though you can scroll around without it snapping into view
I personally like the messages being inside the glass
wow you are amazing ~ may I know what have you changed?
and ya~~ i think it would be better to use a translate function. I'm trying it now
Honestly, barely anything
You were right there!
I got rid of the counter and went back to the old delete message way.
Also removed the scroll effect
This is very impressive, what you've done!
Also, the translate would allow you to animate the messages upwards
Oh ya, I've noticed you have limited only 6 "bubble" to be shown in everytime!
Yes haha, this way you're not filling up the DOM with a bunch of elements 😂
I'd like to see it once you're done trying the translate though!
I've just started learning programming after transitioning from design, and everything seems amazing to me. Haha, give me some time on the translate though.
You'll get the hang of it 🙂
Yeah!! I think I've got it!
https://codepen.io/hackett-lai/pen/RwqzjmW
So I added the move up function at the bottom and take out the counter as your suggestion.
Also I've changed the css class
.bubble to become absolute.
And at last I make the glass bigger to fit all messages haha do you think this is better?I think that looks great!
Animations are very smooth
Thanks!!! Also thanks for your help 🥰🥰
Hey I just found than if my message is being longer, it will break my animation, as the spacing will start getting unstable. I 've update a new codepen:
https://codepen.io/hackett-lai/pen/XWyLOMd?editors=1010
Do you know which part i'm doing it wrong??
I've added some console log and seems like the maths is correct and make sense to me ~
Hey, I'm on mobile for quite a while today but if I'm able to check it out on a computer, I'll see how I can help 👍
You're so nice! I actually found where I made my mistake. I shouldn't have just multiplied the height of the new message blindly. For example, let's say each line of text has a height of 10px. Considering the existing messages:
- Msg A: 1 line (10px)
- Msg B: 1 line (10px)
- Msg C: 2 lines (20px)
If we add a new Msg D with 3 lines (30px), my previous code would perform the following calculations:
- Msg A: 1 line (10 + 30 * 3px)
- Msg B: 1 line (10 + 30 * 2px)
- Msg C: 2 lines (20 + 30px)
- Msg D: 3 lines (30px)
This is what causes the issue.
https://codepen.io/hackett-lai/pen/QWJXoQd
Now I create an array to get all the height from previous message, and than calculate the actual value for each message.
function up() {
const element = document.getElementById(currentID);
const height = element.offsetHeight;
let heightArray = [];
for (let i = 1; i < currentID; i++) {
const currentElement = document.getElementById(i.toString());
if (currentElement) {
let currentHeight = currentElement.offsetHeight;
heightArray.push(currentHeight);
}
}
heightArray.shift();
heightArray.push(height);
for (let i = 1; i < currentID; i++) {
let upCount = heightArray.reduce((acc, num) => acc + parseInt(num), 0);
const currentElement = document.getElementById(i.toString());
if (currentElement) {
currentElement.style.transform = translateY(-${upCount}px);
heightArray.shift();
}
}
}
I just go straightforward following my thinking process and use the code that I've learned so far, I'm not sure if there is a better way or how to optimize it. 🤔 haha~~but seems like it work 😎That's a great idea! Good way to guarantee it's functionality. The only thing now is the chat overflows the glass at the top 😅
haha ya but its OK as its just dummy message, at the end they should not more than 2 to 3 lines hahha
Haha that's fair, in that case, it's more than okay 😂. Really a great job! I enjoy seeing creative things like that
Thanks for your kind words and encouragement !!!! 😊