[V2] Tween+｜Advanced & performant tweening

Resources Community Resources
, , , ,
1

Logo

An open-source tweening library for Roblox, featuring advanced
datatypes, customization, interpolation, and optimization.

Module button ​ Github button




:glowing_star: More capabilities!

Experience animation in Roblox like it should’ve been.

With all the features of TweenService,
and many new and amazing features:

  • Advanced networking for efficient server tweening.
  • Attributes support.
  • Support for advanced data types:
    • Sequences.
    • Ranges.
    • Strings.
  • Support for hidden properties:
    • Pivot.
    • Scale.
  • Framerate limit control.
  • Accurate color interpolation (Oklab).
  • Beautiful, readable syntax.
  • And much more!

:eyes: Check it out below!

🎬 Showcases

Cool text

A simple text tween, made smooth with Tween+’s custom string interpolation.
It identifies the differences, and interpolates accordingly for a seamless animation.

Video

Low FPS

A basic part movement tween with the FPS option set to 10.
The game still runs smoothly (in this case 144 FPS).

Video

Accurate color

A simple part color tween, made smooth and natural with Tween+’s Oklab interpolation.

Video

:fire: Server tween stress test!

10,000 tweens!

TweenPlus

TweenService

For those who are interested in how the networking is done, I wrote about it in detail here.

:high_voltage: Fast, stable, intuitive.

  • Blazingly fast, lag-free performance.
  • Catches errors with clear feedback.
  • Proper typing and documentation.

:light_bulb: Learn how to use it!

Detailed guides and documentation now at alexxander.gitbook.io/tweenplus.

:bell: Don’t forget to stay up-to-date!

Make sure you always have the latest version of the library,
so that you benefit from the newest features, improvements and fixes.

You can see all releases in detail at the GitHub repository.
Major updates will be posted in this topic as well.

:loudspeaker: Share your works and thoughts!

I’d love to see your amazing creations, so consider sharing what you craft!

And please don’t hesitate to ask questions or report any errors you encounter/discover.
I’m always here to help and improve!





Special thanks to:

Like what you see?
Check out my other projects!

∙ ​ Text+｜Custom fonts & advanced control
∙ ​ Signal+｜Super fast & elegant signals
∙ ​ Inxpect｜Easy & efficient API maps

​

Tags

library module api animation tween tweening tweenservice attributes support features advanced control properties fps framerate limit control accurate color interpolation oklab open source quality performance optimization efficient server networking

108 Likes
2

Is there supposed to be example attachments here? They aren’t showing up for me.

image
image762×742 26.7 KB

Cool module!

1 Like
3

Yes, there are supposed to be videos there.
They work perfectly fine for me, so that’s weird.
Which browser are you using?

1 Like
4

I’m sorry but… why?

Tween+

local tweenPlus = require(tweenPlusPath)

local tween = tweenPlus(
    workspace.Part
    {
        Position = Vector3.new(0, 10, 0),
        Color = Color3.fromRGB(255, 255, 0)
    },
    { -- Customization (optional).
        Time = 10,
        EasingStyle = "Sine",
        EasingDirection = "InOut"
    }
)

vs

Roblox Tweens

local TweenService = game:GetService("TweenService")

local tweenInfo = TweenInfo.new(
    5,
    Enum.EasingStyle.Sine,
    Enum.EasingDirection.Out
)

local tween = TweenService:Create(workspace.Part, tweenInfo, {
    Position = Vector3.new(0, 10, 0),
    Color = Color3.fromRGB(255, 255, 0)
})

tween:Play()

What’s supposed to make it better?

2 Likes
5

TweenService enforces an exact order in which you provide the TweenInfo.
Tween+ let’s you provide information in any order you like, while preserving autocompletion.


A case where TweenService would look ugly is if you didn't want to provide all TweenInfo: 
TweenInfo.new(2, nil, nil, 3, nil, 1)

Whereas with Tween+, it would look like this:

{
	Time = 2,
	RepeatCount = 3,
	DelayTime = 1
}

Or if you prefer having it in one line:

{Time = 2, RepeatCount = 3, DelayTime = 1}

Additionally, Tween+ gets rid of ugly enums and uses strings instead, while preserving autocompletion.


Another neat feature of Tween+ is that you can replace the defaults with your own custom defaults, which can make it a lot simpler if you create a lot of similar tweens in your game.

Not to mention the many improvements and additional features beyond design and workflow.
Tween+ is objectively significantly better than TweenService — that’s the entire purpose of Tween+.

8 Likes
6

Did you forget to publicize the videos?

1 Like
7

Yes, I will have to reupload them publicly, so give me a second.

1 Like
8

I’m using Opera GX, i see videos now. Is there images aswell?

1 Like
9

Are the videos visible to you now?

1 Like
10

Most Developers would use a ModuleScript to get Tween Functions ready for their UI to keep it constant, also you’d rather not have the freedom of putting in strings I’d say, 1 typo and your tween won’t work. Imagine doing this in a global module, obviously it should be tested beforehand, but Enums are logical to use as a DataType to prevent mistakes.

Not sure if you have but I’d recommend the possibility of using the Enums themselves too if you can’t already.

Aside from that, for Developers to actually use your Module I would recommend doing it for things that are more valuable, look at for example ProfileService/ProfileStore, Maid and Admin Modules, those may be very useful. This on the other hand is just “learning” a new module to not follow Roblox’s Guidelines on how they’ve implemented it. Which in my eyes, is not a useful module. That’s like making your own custom Integer DataType instead of using the default. :sweat_smile:

11

What do you mean, aren’t videos enough?

12

There’s autocompletion, so it’s extremely hard to mess up.

1 Like
13

Sorry, when i last checked there was a blank space above the videos as if there was another attachment.

14

They’re visible, thanks for re-publicizing!

3 Likes
15

The thing is, you’re looking completely besides the point.
There are many more differences between Tween+ and TweenService, that makes Tween+ significantly better. I’d recommend reading the post.

2 Likes
16

I cannot see them either. I am on Safari.

17

It might be your browser not supporting AV1.
The previous issue was just that the videos were private, which is now fixed and most users are able to see them.

1 Like
18

Any performance changes? What about replication and server handling?

19

Creation is much faster, but unfortunately starting playback of tweens is slower because of all of the additional features it provides.

I haven’t benchmarked CPU usage when tweening, but I can assure you that it has been optimized.
Feel free to benchmark yourself, and don’t forget to share it if you do so!

Also, the UpdateEvent feature allows for significant performance improvements in certain scenarios. Of course TweenService does not have such a feature.

I thought about this, but this module’s purpose might not quite be that.
I want it to be usable for anybody and in any environment — it’s a replacement for TweenService.

2 Likes
20

Okay, actually I was making a similar system for animations from keyframeSequence, so I know a little bit about this topic.

Personally, I love it when people write me a lot of constructive criticism. so now I’m going to ruthlessly evaluate your code :slight_smile:

  • Well, reading your code, I still involuntarily think that there are advantages here too, so let’s write down why your code is not bad:

The documentation is right in the code before the functions, so we see hints, not bad.
Typing is definitely very good, but with the caveats that it was worth putting them in a separate module. They were made purely for “beauty” (hints), although it was possible to work hard and do it in --!strict mode. Yes, it’s difficult for not the most experienced, but still
Also, I note that the code is well organized. Although I just poke my finger into any part of the code and immediately see how to improve readability, and so on, it’s still a difficult job, so I forgive
using your own SignalPlus is good! Judging by the code, they are faster than BindableEvent.

  • What I’m not sure about
    UpdateEvent: Providing a choice between PostSimulation, prestimulation, and PreRender for UpdateEvent gives flexibility, but it can also lead to problems. I’m not sure if it’s worth giving this choice, or if it’s better to limit yourself to one, the most appropriate option.
    table.freeze also seems to be meaningless in your code. No one in an adequate state will change a table from another code. Well, I’m not at liberty to say whether it’s bad or not.
    The native directive looks meaningless in untyped code. If the code had been typed correctly, --!strict would have been enabled, which would have added 20-30% of the code speed, but here the typing was done so that there would be no eye gouging, so this is not only pointless, but even a small anti-pattern is possible.

minuses:
The main problem: Why? The most important question that arises when viewing this code is: why create your own TweenService system? TweenService is an optimized, reliable, and supported Roblox component that provides a wide range of animation features. If there are no very good reasons to create your own system, then it is better to use TweenService. I mean, unlike your code, it’s much more type-safe, probably more convenient, and so on. Just create a wrapper for it that adds functionality.
The propertyExists function uses pcall, which is quite expensive. It is better to use smg like “offline API” and check OflflineAPI[object][property] == nil (or API[object][property] if u can)
The code is quite complex to understand and debug.
I didn’t notice any logic processing when we try to run two twins of the same property for an object. it would be nice to have a weigh system
I also didn’t notice the logic processing when the instance was destroyed. It will most likely give an error, but I think many people would like to be warned so that their myservergamainbestsuperpuper does not turn off due to a destroyed DataStorePartAttributetagImACollectionService (just joking)
also, the structure is not very good in my opinion.
In the current implementation, each tween creates its own separate connection to the RunService.Prestimulation (or another selected UpdateEvent). This can lead to significant overhead costs, especially with a large number of simultaneously running twins.
Ideally, we strive to ensure that all active tweens are handled within a single connection to the RunService.PreSimulation. This will significantly reduce the load on the CPU and improve performance.

Consider using a centralized scheduler that will iterate through all active tines and update their values within a single RunService cycle.PreSimulation. This will require a more complex architecture, but will eventually lead to more efficient operation.
instanceTweens using Instance as a key is a problem. Use Weak Tables.
Or use a unique ID, although I find it pointless.

looked into easing WTHELL MAN THERE ARE SO MANY REPETITIVE LINES OF CODE! “Magic numbers” are bad

(Im used google translator, Im sorry if my text is “unreadable”)

AW:
and I would also say that instead of string … string, you should definitely do `{string1} {string2}(``), except for the moments with tables.
There’s a lot of duplicate code here
To configure it, consider the builder pattern, for example, in roblox it is a separate “TweenInfo” object

1 Like