JavaScript TweenJS is a powerful library that simplifies

Hey there, it's my first time posting on Stackoverflow. I'm facing an issue with a tween in my code. It seems like the brute function is being called at the end, indicating that the tween should be running. However, I'm not seeing any actual tween effect taking place.

window.onload=init();
function init() {
    testImg = document.getElementById("testImg");
    createjs.Tween.get(testImg).wait(2000).to({alpha: 1}, 600).call(brute);
}
function brute() {
    // I'm puzzled why this function is being triggered when there's no visible tween?
    console.log("testImg alpha is " + testImg.alpha)
    testImg.style.opacity=1;
}
#testImg {
    opacity: .3;
    background: url("http://oyos.org/oyosbtn_466x621.jpg");
}
<script src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>

<body>
    <div id="testImg">
        here is the div
    </div>
</body>

javascriptcreatejstweentween.js

Answer №1

TweenJS was primarily designed to tween properties directly on objects rather than styles on HTML elements. However, there is a CSS plugin available that can assist with this, especially for properties with suffixes like "px" on width/height.

While it may require some adjustments, it is possible to achieve the desired effect. Here are a few key points to consider:

  1. Instead of targeting the "alpha" property, you should focus on the "opacity" property for EaselJS DisplayObjects.
  2. You need to target testImg.style as the location of the opacity property since it resides on the element's style and not directly on testImg.
  3. Keep in mind that TweenJS does not automatically recognize CSS properties applied through classes or selectors, making it essential to use getComputedStyle which can be resource-intensive.

In order to make your demo function correctly, these considerations must be taken into account. Below is an updated snippet (originally from this pen):

createjs.Tween.get(testImg.style)
  .to({opacity:0.3})
  .wait(2000)
  .to({opacity: 1}, 600)
  .call(brute);

Alternatively, you can utilize the change event to manually update the opacity:

createjs.Tween.get(testImg)
  .set({alpha:0})
  .wait(2000)
  .to({alpha:1})
  .call(brute)
  .on("change", function(event) {
    testImg.style.opacity = testImg.alpha;
  });

It's worth noting that the CSS plugin now has the capability to handle computedStyle lookups, offering improved functionality.

Hopefully, this information clarifies the process for you. Best regards,

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Powerful Duo: JavaScript and Regex

Having some issues with the code snippet below, I know there's an error in my code but I can't seem to figure out what it is (tried enclosing the code in quotes but that didn't work...) var Regex = require('regex') var regex = new ...

javascriptregexnode.js

I'm experiencing difficulties inserting data into my RECHARTS chart

I have several sets of data arrays from an API that I receive, and I need to use the [1] index of each array on the line and the [0] index on the axis of my chart. DATA SET 31) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2 ...

javascriptarraysreactjsnext.jsrecharts

I currently have an array of strings and wish to print only the lines that include a specific substring

Here i want to showcase lines that contain the following strings: Object.< anonymous > These are multiple lines: Discover those lines that have the substring Object . < anonymous > Error: ER_ACCESS_DENIED_ERROR: Access denied for user ' ...

javascriptarraysnode.jsstringnpm

Utilize Angular2's input type number without the option for decimal values

Is there a way to prevent decimals from being entered in number inputs for Angular 2? Instead of using patterns or constraints that only invalidate the field but still allow typing, what is the proper approach? Would manually checking keystrokes with the ...

javascripthtmlinputangular

Observing the Transformation When Employing *ngIf or *ngSwitchCase in Angular 2

Can someone lend a hand? I've run into an issue where my custom JavaScript function is not working after using *ngIf or *ngSwitchCase to change the view. Any suggestions on how to resolve this would be greatly appreciated. ...

javascriptangular

Choosing a Component in a Collection with Angular 2

Seeking advice on how to address an issue I'm facing with a sign-up page. Within the page, there are two buttons, represented by components <btn-gender>, each displaying a gender option for selection. The challenge lies in creating a logic to d ...

javascriptangularionic2

Build a Google Map Widget within SurveyJs

Hey there, I'm new to working with SurveyJS and I'm trying to incorporate a Google Map widget into my SurveyJS. I followed some steps and successfully added the map in the Survey Designer section, but unfortunately, it's not loading in the T ...

javascriptangulartypescriptgoogle-mapssurveyjs

Can anyone suggest a solution to troubleshoot this issue with CSS Flexbox and absolute positioning?

I'm currently developing a React application featuring flex container cards (referred to as .FilmCard with movie poster backgrounds) within another flex container with flex-wrap. Each card has an item positioned absolutely (an FontAwesome arrow icon). ...

javascriptcssreactjsflexboxfont-awesome

The autocomplete feature fails to properly highlight the selected value from the dropdown menu and ends up selecting duplicate values

After working on creating a multiple select search dropdown using MUI, my API data was successfully transformed into the desired format named transformedSubLocationData. https://i.stack.imgur.com/ZrbQq.png 0: {label: 'Dialed Number 1', value: &a ...

javascriptreactjsmaterial-uireact-material-ui-form-validator

Validation of VAT numbers using JavaScript instead of PHP

I came across an interesting function at this link that is used for checking VAT numbers in the EU. However, I am struggling to integrate it with my registration form. I would like to convert it into a JavaScript function so that I can validate the number ...

javascriptphpfunctionsoap

Using Angular 6's httpClient to securely post data with credentials

I am currently working with a piece of code that is responsible for posting data in order to create a new data record. This code resides within a service: Take a look at the snippet below: import { Injectable } from '@angular/core'; import { H ...

javascriptangulartypescriptangular6

Guide for invoking a servlet via a navigation bar hyperlink and implementing a jQuery feature for smooth scrolling upon clicking

Is there a way to call a servlet from a navigation bar href link and at the same time trigger a jQuery function for smooth scrolling down? I attempted to call the servlet using an onclick href link, it successfully calls the servlet but does not trigger t ...

javascriptjavajquery

typescript in conjunction with nested destructuring

ES6 has definitely made coding more efficient by reducing the number of lines, but relying solely on typescript for everything may not be the best approach. If I were to implement type checking for arguments that have been destructed multiple levels deep, ...

javascripttypescriptecmascript-6react-tsx

Disabling data-scroll-speed on mobile devices

As a beginner in JavaScript/jQuery, I am working on incorporating code that changes the scrolling speed of specific elements on my webpage. However, I am struggling to disable this code for smaller screen widths. Here is the code snippet I have so far: &l ...

javascriptjquery

Obtain the AngularJS service using Vanilla JavaScript

Trying to access the AngularJS service from plain JavaScript. Utilizing the following syntax: angular.injector(['ng', 'error-handling']).get("messagingService").GetName(); It works fine when the messagingservice has no dependencies. H ...

javascriptangularjs

The origin of the recipient window does not match the target origin provided when using postMessage on localhost

Currently, I am in the process of developing an application that utilizes single sign-on (SSO) for user authentication. Here is a breakdown of the workflow: Begin by launching the application on localhost:3000 (using a React Single Web Application). A po ...

javascripthtmlnode.jsreactjs

Transmit information using JSON format in Angular 8 using FormData

i am struggling with sending data to the server in a specific format: { "name":"kianoush", "userName":"kia9372", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcd7d5ddd8ce85...@example.com</a>" } H ...

javascriptangulartypescript

The issue in Vue JS arises when trying to access JSON key values from an object array using v-for

I am currently working on parsing a list of objects found within a JSON payload into a table utilizing Vue.js. My goal is to extract the keys from the initial object in the array and use them as headings for the table. While the code I have in place succe ...

javascriptjsonvuejs2

Creating a resilient node websocket client with enhanced security (overcoming the challenge of verifying the initial certificate)

What's Working? I successfully created a node server using WebSocket technology. I used the library WebSocket-Node and added key/cert to my HTTPS/secure websocket server as shown below: import WebSockerServer from "websocket"; import fs fro ...

javascriptnode.js

Troubleshooting the issue of post-initialization store updates not functioning in AlpineJS

When setting up a store, I initially use: document.addEventListener('alpine:init', () => { Alpine.store('selectedInput', 0) }) However, when attempting to update selectedInput within a function later on, it doesn't reflect th ...

javascriptalpine.js